PDA

View Full Version : Possible problem with Drop down/ Overlapping Content script



Starcrwzr
10-28-2008, 08:55 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: I'm trying to use this script on a CSS page in Expression Web. When I tried the demo on the DD site, the pop up boxes appeared right where they should, next to the mouseover point, using FF 3.1, Chrome or IE7. But when I test the script in my page, the pop up boxes appear almost 300 pixels below where the mouseover point is. Any ideas on why and where the problem lies? I don't have the page up on a web site yet, but I can if someone wants to see it.

Starcrwzr
10-28-2008, 10:32 PM
I've put the page under question here:

http://www.julianmerchants.org/members/test_members.htm

If this will help solve the problem.

Only the top two Members, listed on the page, have pop up.

ddadmin
10-29-2008, 06:06 AM
Most of the positioning problems with the drop down DIV can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<DIV id="Affordcontent" style="position:absolute; visibility: hidden; border: 2px solid green; background-color: white; width: 300px; padding: 2px;">
Affordable Self Storage Content goes here.<br /> And more goes here and here and here and here and here.</DIV>


<DIV id="alpinecontent" style="position:absolute; visibility: hidden; border: 2px solid green; background-color: white; width: 300px; padding: 2px;">
Alpine Chamber Content goes here.<br /> And more goes here and here and here and here and here.</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("Afford", "right-bottom", 10, "mouseover")
dropdowncontent.init("alpine", "right-bottom", 10, "mouseover")
</script>

</body>

Notice how you should also move the initialization code to the bottom, following (not proceeding) the drop down DIVs.

Starcrwzr
10-29-2008, 01:40 PM
Excellent! That took care of it! Thanks!

Scott B)