homepage Welcome to WebmasterWorld Guest from 54.227.215.140
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
x & y position in JavaScript
ControlZ

10+ Year Member



 
Msg#: 324 posted 8:39 am on Mar 22, 2003 (gmt 0)

Here's the line: got a JS I modified, which produces a dropdown JS menu as a site navigation tool. The postioning of the drop down menus is set by X&Y position.

Here's the problem, if you set the X&Y from a 1024x764 resolution, all is fine, but obviously this changes when the menu is viewed at either a smaller or larger resolution. The X&Y postion changes because of the smaller or larger resolution, thus blowing the alignment of the menus.

Is there a way to make the X&Y position relative to the actual screen size, so that not matter what resolution was used the drop down menus would hold their proper placement, in relation to the main menu they drop down from?

**Note-the page this script is used on is set to 100% width due to space requirements. If I were to set the menu size to a width such as 760px as well as the main table, this would solve the problem, but anything less than 100% width is really a good solution.

Here's a snippet of the actual link script:
(you can see below the x&y as 9 & 107 respectively)

<A href="" onmouseover="MM_showMenu(window.mm_menu_0930130724_0,9,107,null,'header_instructor')" onmouseout="MM_startTimeout();"><img src="images/club_menu.gif" width="151" height="22" border="0"></a>

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 1:48 pm on Mar 22, 2003 (gmt 0)

You can check for inner width this way:

winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;

Note that this check has to be done after the <body> tag. Now you can use percent values against the winWidth value (rounded off)...

ControlZ

10+ Year Member



 
Msg#: 324 posted 6:12 pm on Mar 22, 2003 (gmt 0)

Doc, thanks! Would I incorporate the code you presented into a new script within the body tag or would the snippet you presented be a new script?

I guess I am confused as to how to implement the snippet you provided. I am not real experienced with JavaScipt. :(

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 8:32 pm on Mar 22, 2003 (gmt 0)

Now, say that you want to figure out how many pixels "15%" are... instead of passing the pixel values for x & y you pass the percentage

MM_showMenu(window.mm_menu_0930130724_0,0.15,0.10,null,'header_instructor')

Then, inside your MM_showMenu function you calculate how many pixels that is equivalent to.

For example:

<body>
<script type="text/javascript">
winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;

function MM_showMenu(blah,x,y,blah) {
...
new_x = Math.round(winWidth*x);
new_y = Math.round(winWidth*y);
...
}

</script>
...
</body>

Now you have the pixels and can use them for positioning.

Hope this example made sense...

ControlZ

10+ Year Member



 
Msg#: 324 posted 11:13 pm on Mar 22, 2003 (gmt 0)

Hmm, OK, I understand what you are saying Doc, but here are my questions.

1. Is the example script you presented in addition to the script I am already using?

2. Could you present the example script you created as an actual script and not an example. In other words, a script that would actually work (with values that would not necessarily work) but would allow me to modify the script after I determine the math?

3. So in essense, (1)I will have the JS on the server, (2)the JS that determines the individual parameters in the head section. (3) This line within the body section:<script language="JavaScript1.2">mmLoadMenus();</script> (4)And the JS example you provided?

I am getting close, but still a bit lost. Thanks for your patience. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved