[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 946
  • Last Modified:

Position of a div layer

I am trying to create a dropdown menu but I cant figure out how to get the menu to show under the img that I am using for the menu. Here is the code I have so far:

<html>
<head>
<title>Show menu</title>
<script language="javascript" type="text/javascript">
function menu_show(menu) {
var menuid = document.getElementById("menu_" + menu);
var img = document.getElementById("img_" + menu);
menuid.style.display = "block";
var imgx = img.x;
var imgy = img.y;
menuid.x = imgx + 5;
menuid.y = imgy + 100;
}
function menu_hide(menu) {
var menuid = document.getElementById("menu_" + menu);
menuid.style.display = "none";
}
function menu_bg(what, img) {
var menu_bg = document.getElementById(what);
menu_bg.background = img;
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<img src="../../images/scripts.gif" id="img_scripts" onMouseOver="menu_show('scripts');" onMouseOut="menu_hide('scripts');">
<img src="../../images/tutorials.gif" id="img_tutorials">
<img src="../../images/polls.gif" id="img_polls">
<img src="../../images/profile.gif" id="img_profile">
<div id="menu_scripts" style=" position:relative;display:none; ">
<table>
<tr><td background="images/Menu_bg.gif" onMouseOver="menu_bg('row_php', 'Menu_bg_over.gif')" id="row_php"><a href="../../Web%20App/scripts.php?cat=php">PHP</a></td></tr>
<tr><td background="images/Menu_bg.gif" onMouseOver="menu_bg('row_html', 'Menu_bg_over.gif')" id="row_html"><a href="scripts.php?cat=html">HTML</a></td></tr>
</table>
</div>
</body>
</html>

So far I have only done the first menu.

Thanks,
Cappy Reeves

p.s. if there is anything i need to do let me know.
0
viperman95833
Asked:
viperman95833
  • 4
  • 2
  • 2
1 Solution
 
ZontarCommented:
var imgx = img.offsetTop;
var imgy = img.offsetLeft;

However, with a little redesign, you could get rid of the need to test position altogether. Here's one way to do it: http://www.alistapart.com/articles/dropdowns/

My own preferred method for building dropdowns is to use unordered lists plus CSS (and a little JS for MSIE since it doesn't support :hover on anything but links).
0
 
viperman95833Author Commented:
that got rid of the error however. It dosn't position the layer. how would I get the layer to beable to be positioned where I want so that I can move it to under the img or a little over?

Thanks,
Cappy Reeves
0
 
JakobACommented:
here is a page where layers are placed relative to an image (hidden) in each link
    http://hjem.get2net.dk/Jakob.Aggernaes/temp/exp93955.html

regards Jakoba
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ZontarCommented:
Example (general):

menuid.style.left = "50px";
menuid.style.top = "35px";

More specific, something like

menuid.style.left = img.offsetLeft + "px";  //  set the left edge of the div same as the left edge of the img
menuid.style.top = img.offsetTop + img.height = "px"; // set the top edge of the div same as the bottom edge of the img

...if I understand what you're trying to do correctly.

0
 
ZontarCommented:
>  here is a page where layers are placed relative to an image (hidden) in each link

Unnecessary hack. It's quite possible to build a pulldown menu using no positioning whatsoever (unless you're worried about NS4 which I'm not anymore).
0
 
JakobACommented:
>> Zontar :   your call :-))
   I hope you wont mind if I keep making my code as crossbrowser compatible as I can.
0
 
viperman95833Author Commented:
Good Job. I wasn't putting the "px" in there so the computer was thinking number not pixles. Sweet!

Thanks,
Cappy Reeves
0
 
ZontarCommented:
Well, what Viperman's got there is only good for the version 5+ browsers anyway. ;-)

(I just hate the whole concept of "layers" -- it's so 20th Century, you know?)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now