Solved

Position of a div layer

Posted on 2003-11-16
8
906 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now