PDA

View Full Version : DD/Overlapping Content



gmukundi
03-30-2011, 01:13 PM
1) Script Title: DD Overlapping Content

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

3) Describe problem:
This is a great piece of code, I however seem to have a problem, I have been trying to use this script to generate overlapping content, When I put it on an empty the page the location of the overlapping content appears ok, but when I put it in my page with divs that define page layout the overlapping content appears in an unexpected area, see this url http://mail.utuagencies.com/drop.php Is there something I need to do for the drop down to appear where I expect it?

Forgive me I am poor in using javascript.

gmbiggie

vwphillips
03-31-2011, 07:52 AM
first you have duplicate ID names 'wrapper'

but try this


<div id="header" style="position: relative; height: 50px; border: solid 1px red;"></div>
<div id="wrapper" style="position:relative; top: 5px; height: 580px; border: solid 2px green; padding: 5px;">
<div id="leftCol" style="position: absolute; height: 565px; padding: 5px; left: 5px; width: 200px; border: solid 1px grey; top: 5px; padding: 5px">
</div>
<div id="rightCol" style="position: absolute; padding: 5px; left:220px; width: 600px;">
<div id="_wrapper">
<div id="prod_1">
<div class="_Image">
Image Location<br><a href="" id="searchlink24" rel="subcontent24">more Values</a>
</div>
<div class="_Data">
<div class="_Title">Title & Values</div>
</div>
</div><!-- close div -->
</div> <!-- close wrapper--></div>
</div>
</div>
<div id="footer" style="position: relative; height: 50px; top: 10px; border: solid 1px blue;"></div>
<div id="subcontent24" style="position:absolute; visibility: hidden; border: 1px solid orange; background-color: white; width: 200px; padding: 8px;">
<ul>
<li>value 2</li>
<li>Value 3</li>
<li>Value 4</li>
</ul>
</div>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink24", "left-bottom", 400, "mouseover")
</script>


with the note un nested

gmukundi
04-06-2011, 12:11 PM
@vwphillips

Thanks for the observation, I have put an underscore before the second wrapper. I am still having a problem with the position of the values I dropdown.

I found another tool that works great on javascriptkit.com and when I put it into the page it worked fine

http://www.javascriptkit.com/script/script2/jScale/