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%"> </td>
<td width="88%"> </td>
</tr>
<tr>
<td width="12%"> </td>
<td width="88%"> </td>
</tr>
<tr>
<td width="12%"> </td>
<td width="88%"> </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;
}
}
精彩评论