Solved

Position of a div layer

Posted on 2003-11-16
8
911 Views
Last Modified: 2008-03-04
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
Comment
Question by:viperman95833
  • 4
  • 2
  • 2
8 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9760160
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
 

Author Comment

by:viperman95833
ID: 9760241
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
 
LVL 15

Expert Comment

by:JakobA
ID: 9760567
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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 11

Accepted Solution

by:
Zontar earned 175 total points
ID: 9760881
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9760893
>  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
 
LVL 15

Expert Comment

by:JakobA
ID: 9760992
>> Zontar :   your call :-))
   I hope you wont mind if I keep making my code as crossbrowser compatible as I can.
0
 

Author Comment

by:viperman95833
ID: 9761283
Good Job. I wasn't putting the "px" in there so the computer was thinking number not pixles. Sweet!

Thanks,
Cappy Reeves
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9761331
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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question