Классический ASP и JavaScript

Question

Может кто-нибудь помочь мне по моему запросу. У меня есть страница с кнопкой

<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>

и всякий раз, когда нажимается эта кнопка, маленький слой должен открываться прямо под кнопкой. Я пытался сделать это, используя кнопки слева и сверху, но это не сработало во всех браузерах. Код слоя ниже. Слой по умолчанию будет скрыт, если пользователь не нажмет кнопку.

                    <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>

Ценю вашу помощь.

Answer 1

Спасибо всем за вашу прямую / косвенную помощь.Мне удалось решить проблему из внешних источников.

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;
}
}

Answer 2

Я только что сделал нечто подобное. Надеюсь, вы можете использовать это. Он использует prototype.js и scriptaculous :

      function hideDivs() {
    Element.hide('subnavHM');
    $('subnavHM').shown = false;

    Element.hide('subnavSS');
    $('subnavSS').shown = false;

    Element.hide('subnavPO');
    $('subnavPO').shown = false;

    Element.hide('subnavIN');
    $('subnavIN').shown = false;

    Element.hide('subnavPE');
    $('subnavPE').shown = false;

    Element.hide('subnavAN');
    $('subnavAN').shown = false;

    Element.hide('subnavDV');
    $('subnavDV').shown = false;

  }

  function showHide(div) {
    hideDivs();

    if ($(div).shown) {
      $(div).style.visibility = "hidden";
      new Effect.Fade($(div));
      $(div).shown = false;

    }
    else {
      $(div).style.visibility = "visible";
      new Effect.Appear($(div));
      $(div).shown = true;
    }
  }

Я запускаю hideDivs при загрузке тела