Positioning popup() CSS positioned DIV

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:16

Positioning popup() CSS positioned DIV

Poster: mcarlson
Dated: Monday September 29 2008 - 20:52:24 BST

I'm having a problem with the popup positioning when called from within a div that is positioned using CSS. You can see the page I'm referring to here: http://www.patmetheny.com/index_2008.cfm. You'll need to view this in a browser other than IE, as the popup doesn't work at all in IE. I'm assuming this is related to the positioning problem I'm having. The menu on the left is a table within a div with the following definition:

#fixedcontent {position: fixed; z-index: 2; top: 0em; left: 0em; width: 210px; height: 100%; padding: 0px; border: 0px;}

This keeps the menu on the left fixed in place when the rest of the page is scrolled. For an example of the issue, roll over the "Listen" button and you will see a popup menu appear. If the page is scrolled all the way to the top, the menu appears where it should, but if you scroll down the page a bit and try again, you will see the popup menu has moved up along with the scrolling content instead of staying locked to the menu. Eventually it disappears off the top of the page completely. The popup menu is being shown using the popup() method, positioning it in reference to the menu image itself:

<a href="/media.cfm?artistid=1" onmouseover="popup('listenMenu', 'listen',-30,210)" onmouseout="popdown()"><img src="images/redesign2008/b_listen.png" id="listen" alt="Listen" width="210" height="30" border="0" /></a>

Any idea how I can get the popup to always appear in the same place in relationship to the menu image rather than scrolling with the page content?

Re: Positioning popup() CSS positioned DIV

Poster: mcarlson
Dated: Monday September 29 2008 - 21:26:10 BST

Alright, I figured this out. I just included all the js includes within the div itself, rather than in the header.
Now I just need to figure out why it's not working at all in IE.

Re: Positioning popup() CSS positioned DIV

Poster: Ruth
Dated: Tuesday September 30 2008 - 5:13:26 BST

Hi,

Remove the top and left from the style sections, those properties are menu properties only. Then you need to add name= along with the id= in your images for the popup.

Code:

<img src="b_listen.png" id="listen" name="listen"

and so on. I just tested it on my desktop and it works fine [except for the dojo thing for which it keeps looking

]

Hope this helps.

Ruth

Re: Positioning popup() CSS positioned DIV

Poster: mcarlson
Dated: Tuesday September 30 2008 - 14:34:07 BST

Perfect, thanks! I thought I had name attributes in there, but clearly I didn't.

By the way, is there a listing of all the possible properties for styles, menus and menu items? I get confused by the Quick Reference Guides on the site. For example, target, text and url are listed as style properties, but aren't they menu item properties?

Re: Positioning popup() CSS positioned DIV

Poster: Ruth
Dated: Tuesday September 30 2008 - 15:32:15 BST

mcarlson wrote:

By the way, is there a listing of all the possible properties for styles, menus and menu items? I get confused by the Quick Reference Guides on the site. For example, target, text and url are listed as style properties, but aren't they menu item properties?

No, there isn't one, but I've been working on one for awhile, if life would quit interferring and just let me play around with the things I like to do it might actually be done :lol:

Ruth