Question

Can anyone help me on my query. I have a page which has a button

<button id="btnStudents" name="btnStudents" style="width:90px;cursor:default;" title="Click to add/update/delete Student records" onClick="javascript:fn_ShowHide('lyrStudents', this.id)"> 
                <table width="100%" cellpadding=0 cellspacing=0>
                  <tr> 
                    <td height="25"> 
                      <div align="center"><img src="../images/icons/student.gif" hspace="0" align="absmiddle" width="32" height="32" vspace="10"><font class="BodyHDRFontBold"></font></div>
                    </td>
                  </tr>
                  <tr> 
                    <td height="25"> 
                      <div align="center"> <font class="BodyHDRFontBold"><b>Manage 
                        Students</b></font></div>
                    </td>
                  </tr>
                </table>
                </button>

and whenever this button is clicked, a small layer should open right under the button. I tried to do it using button’s left and top but it did not work in all the browsers.
Layer code is below. Layer by default will be hidden unless user clicks on the button.

                    <div id="lyrStudents" style="position:absolute; left:749px; top:412px; width:183px; height:148px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tblBorder">
                    <tr> 
                      <td colspan="2" class="bgColorBar" height="25"> 
                        <div align="center"><font class="BodyFontNormal"><b>:: 
                          Students Menu ::</b></font></div>
                      </td>
                    </tr>
                    <tr> 
                      <td colspan="2"><img src="../images/supporting/b3b3ff_line.png" width="100%" height="1"></td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                  </table>
                </div>

Appreciate your help.

Answer 1

Thanks everyone for your direct / indirect help. I have managed to get the issue resolved from external sources.

function fn_Reposition(strFieldName, lyrName )
{
var intLeft, intTop, intBtnHeight, obj;

obj = document.getElementById(strFieldName);
intBtnHeight = document.getElementById(strFieldName).clientHeight;

document.getElementById(lyrName).style.top = getElTop(obj) + intBtnHeight;
document.getElementById(lyrName).style.left = getElLeft(obj)
}


// Many thanks to Paul Hayman 
// Code Source: http://www.geekzilla.co.uk/ViewContent.aspx?ContentID=252 
function getElLeft(el)
{
if (ns4)
{
    return el.pageX;
} 
else
{
    xPos = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null)
    {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return xPos;
}
}
function getElTop(el)
{
if (ns4)
{
    return el.pageY;
} 
else
{
    yPos = el.offsetTop;
    tempEl = el.offsetParent;
    while (tempEl != null)
    {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
    return yPos;
}
}