relative position, center, screen size

Taken From The Forum:
Forum Topic:
Last Updated: Wednesday July 18 2012 - 06:07:47

relative position, center, screen size

Poster: selfsimilar __at__ hotmail.com
Dated: Friday January 25 2002 - 20:37:44 GMT

I am trying to use the menu in a centered page(<div align="center">) but I have got problem when changing screen size, ie it works fine in 1024x768 but not in 800x600.

Is there to grab the user's screen size and adapt my script accordingly. ? Or is there another way around this problem ?

A graphical view of the problem can be found here: http://www.corobori.com/ProblemWithMenu.jpg

Jean-Luc

Re: relative position, center, screen size

Poster: Anonymous
Dated: Sunday May 19 2002 - 19:49:47 BST

Yes, one way to get relative positining is as follows (based on and courtesy of an old Dan Steinman widget).

The exact width of the browser window can be used to position items including the Milonic Menu. To find the width of the browser, check the following properties after the BODY tag but BEFORE the Menus are loaded (because for IE the body element is used:

In Netscape: window.innerWidth
In IE: document.body.scrollWidth

However, these values don't take into account the scrollbar which can be accounted for by subtracting 20 from the width in IE, and 16 in Netscape (Netscape excludes the chrome window border). The following works for IE and NS (Note, that it has not be tested in NS6):

<BODY>
<SCRIPT LANGUAGE="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
</SCRIPT>

</BODY>

After the winW variable is defined, it can be used to position the menu. To use these values to center, do a little math to find where the left co-ordinate should be. For example if your menu is 100px wide, you'll need to use the (winW-100)/2 for the left coordinate. Of course your value may differ so experiment with the math. Place the variable expression in the menu array where the left position value goes.

While this works, the menu will lose its positioning upon resize. Thus, the following Netscape code reloads the page on resize, using the browser width and height to check if the size has changed.

Netscape Resize Fix Function
// Netscape Resize Fix
if (document.layers) {
widthCheck = window.innerWidth
heightCheck = window.innerHeight
window.onResize = resizeFix
}
function resizeFix() {
if (widthCheck != window.innerWidth || heightCheck != window.innerHeight)
document.location.href = document.location.href
}

Hope this helps,
Andre

Re: relative position, center, screen size

Poster: Anonymous
Dated: Sunday May 19 2002 - 19:49:48 BST

From the way you appear to be using the menu in an absolute position the best way would be to use the glue to a table cell function. As is I see no way you will get the menu to ever stay in that spot on the page layout. To glue the menu in a cell of a table do:
<td><script>PlaceMenu("mainmenu")</script>
Make sure you have no setting for width in the table tag, set that in the td, and do not end tr or td tags. Currently these are known issues and are being addressed.
Cheers!
Yadin

Re: relative position, center, screen size

Poster: Anonymous
Dated: Sunday May 19 2002 - 19:49:49 BST

i have the exact same problem as jean-luc i just cant get the menu to stay in one place when i change the screen size. Can someone please explain it so i can understand how to do it?

Industrial Strength JavaScript and DHTML Menus

relative position, center, screen size

Re: relative position, center, screen size

Re: relative position, center, screen size

Re: relative position, center, screen size