Trouble repositioning javascript menu
I am using a javascript menu that reads its items from an xml document for a website. The menu is on each page, and is constructed when each page loads. The form on each page is centered within the window.
Their is also a resize function that is called whenever the window is resized, and this is supposed to reposition the menu in its correct spot according to the size and position of the resized window. It does this by finding a div where the menu item should be, and placing the menu in this position. The functions to construct and resize the menu, as well as the function to find the new position for the menu are all in a separate javascript file.
The resize function works perfectly, except when you resize the window while the page is loading. When this happens, the menu seems to be placed where it was for the previous page with the previous window size and position. I.e. the menu sometimes runs off the form to the left or right after resizing, as the form is centered. The timing of the resizing has to be perfect for this to happen, but its very irritating when it does.
The following code is placed just before the closing form tag:
<script>
buildmenu;
OCMenu.onafterresize = "resize()"
</script>
This doesnt seem to be an issue when the form is aligned to the left of the window, but i would prefer to have it centered.
Is there anyway i can prevent this from happening - should i call the resize function at a different time?
Thanks
Re: Trouble repositioning javascript menu
It sounnds like resizing when the page has not loaded causes the script to break. This isn't surprising as some of the elements the script needs to access may not yet have been created.
Use a flag in the head part of the html and the onload event of the body element to set the flag to true and prevent the resize() function from executing if the flag is set to false.
Code:
<html>
<head>
<script type="text/javascript">
<!--
var loaded = false;
function resize()
{
if (! loaded) return
/* .... */
}
//-->
</script>
</head>
<body onload="loaded=true;">
...
..
</html>
