开发者

Classic ASP & JavaScript

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 record开发者_StackOverflow中文版s" 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.


I have just done something similar. Hope you can use this. It uses prototype.js and 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;
    }
  }

I run hideDivs from body onload


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜