Forum Moderators: open

Message Too Old, No Replies

Positioning of Javascript Drop Down Menus

         

fmhxyz

5:30 pm on May 28, 2004 (gmt 0)

10+ Year Member



I noticed an earlier posting related to positioning of
Drop Down Menus created in Fireworks.

The function fw_showmenu(menu,x,y,child) provides you
with the ability to locate the Drop Down menus at point
(x,y) in pixels on a webpage. The issue is that this
x and y positioning is absolute positioning from the
(0,0) origin of the webpage.

Does anyone know of a way to define relative positioning
say from the reference button that triggers the drop
down?

This way the button can be positioned anywhere
on the webpage and the drop down will always appear either
on, above, below, left, or right of this button relative
to the button - not the (0,0) point of the webpage.
This would make coding a lot easier and would make
the page more consistent from computer
to computer irrespective of resolution, etc.

It would make sense to have the capability to do this.

Rambo Tribble

2:29 am on May 29, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Netscape 4 supports screenX and screenY properties, but other browsers do not. Positioning functionality is deferred to CSS in standards-compliant browsers.

By utilizing a containing element (such as a <div>), it should be possible to constrain the display of an element within that container, relative to another element displayed within the container.

As a crude example, try the code below. Where ever you position the container div, the contained divs will follow in unison.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container" style="position:relative;top:200px;left:300px;">
<div style="position:absolute;height:80px;width:160px;background:teal;"
onmouseover="document.getElementById('dropDiv').style.visibility='visible';"
onmouseout="document.getElementById('dropDiv').style.visibility='hidden';">
</div>
<div id="dropDiv" style="position:absolute;height:160px;width:80px;left:160px;background:red;visibility:hidden;">
</div>
</div>
</body>
</html>

fmhxyz

3:29 am on May 29, 2004 (gmt 0)

10+ Year Member



Thanks. I will study the code you posted.

Not sure why screenx and screeny properties aren't
universally applied to all browsers.
Would seem the logical thing to do to me.