Problem with Zoom

Hi

The problem I’m facing is – when a user tries to zoom-in or out, the position of the javascript slide-out menus is screwed. Please don’t confuse this with resizing.

To make it more clear-
Go to [url]http://studev-2.usc.edu/default.htm[/url] and do a Ctrl + “+”/”-“. If you now move-over to any of the “Academics Admission Research Faculty & Staff Resources” links, the position of the sliding menus is not correct (the horizontal positioning is wrong)

I’ve already tried Debugging it and it seems to me that when you zoom out the browser squeezes more pixels in the screen but the pixel width of the content remains the same. I’m not sure though.

I’m a student worker at USC nearing my deadline so any help with be much appreciated.

The relevant code snippits are as follow-

[CODE]

function getMenuCells()
{
document.write(

‘<td valign=”middle”><img src=”http://studev-2.usc.edu/images/up_tri_red.gif”> </img></td>’ +
‘<TD valign=”middle” align=”left” id=”menu2″ >’ +
‘ <a class=”menuLink”‘ +
‘ onmouseover=”ypSlideOutMenu.showMenu(‘menu2’);” ‘ +
‘ onmouseout=”ypSlideOutMenu.hideMenu(‘menu2’);document.getElementById(‘menu2’).bgColor=”;this.style.color=”;” ‘ +
‘ href=”http://studev-2.usc.edu/current/courseind.htm”>’ +
‘ Academics’ +
‘ </a>’ +
‘</TD>’
}

[/CODE]
[CODE]
function initMenu(left, top)
{
if(document.body.clientWidth > 800 )
{
left += (document.body.clientWidth – 800)/2;
}

// nav menu setup
new ypSlideOutMenu(“menu2”, “top”, left +20, top-20,
(width = document.getElementById(‘menu2Content’).childNodes.item(0).width)
? width : document.getElementById(‘menu2Content’).childNodes.item(1).width, 4 * (21))
}
[/CODE]
[CODE]
function getMenuData()
{
document.write(

‘<DIV id=menu2Container>’ +
‘ <DIV id=menu2Content class=”menucenter”>’ +
‘ <TABLE cellSpacing=0 border=0 width=”176″>’ +
‘ <TR>’ +
‘ <TD vAlign=center height=20 onmouseover=”this.bgColor=’#FFDE5B’;” ‘ +
‘ onmouseout=”this.bgColor=””>’ +
‘ <a href=”http://studev-2.usc.edu/current/undergrad/default.htm” class=”menuoptions”>’ +
‘ &nbsp;Undergraduate Program’ +
‘ </a>’ +
‘ </TD>’ +
‘ </TR>’ +
‘ <TR>’ +
‘ <TD vAlign=center height=20 onmouseover=”this.bgColor=’#FFDE5B’;” ‘ +
‘ onmouseout=”this.bgColor=””>’ +
‘ <a href=”http://studev-2.usc.edu/current/graduate/default.htm” class=”menuoptions”>’ +
‘ &nbsp;Masters Program’ +
‘ </a>’ +
‘ </TD>’ +
‘ </TR>’ +
‘ <TR>’ +
‘ <TD vAlign=center height=20 onmouseover=”this.bgColor=’#FFDE5B’;” ‘ +
‘ onmouseout=”this.bgColor=””>’ +
‘ <a href=”http://studev-2.usc.edu/current/graduate/phd.htm” class=”menuoptions”>’ +
‘ &nbsp;Ph.D. Program’ +
‘ </a>’ +
‘ </TD>’ +
‘ </TR>’ +
‘ <TR>’ +
‘ <TD vAlign=center height=20 onmouseover=”this.bgColor=’#FFDE5B’;” ‘ +
‘ onmouseout=”this.bgColor=””>’ +
‘ <a href=”http://studev-2.usc.edu/current/courseind.htm” class=”menuoptions”>’ +
‘ &nbsp;Courses Offered’ +
‘ </a>’ +
‘ </TD>’ +
‘ </TR>’ +
‘ </TABLE>’ +
‘ </DIV>’ +
‘</DIV>’
[/CODE]

The order of function calls is-
getMenuData();
getMenuCells();
initMenu(233, 285);

regards
nikhil

Also in #JavaScript _↴