Drop down/ Overlapping Content script help me please

[Dazza30]

Hello all
:confused: 1) Drop down/ Overlapping Content script

2) http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) This script is great but the problem im having is i need to have more than one of the dropdown boxes on a page.
Currently when i try to do this the content from the 1st box takes over anyothers i and also resizes the box.

Any assistance would be great.

[jscheuer1]

You've obviously missed something from the demo page as, there are two on it. Either go back over the instructions or, give us a link to your problem page if you want more help.

[poohster]

i to would like to place more than one i tried the examples but cant figure out how to make them both dropdown instad of the one opening up but when i try a third one, one wont work. this it the script i have tried.


<p><a href="http://www.dynamicdrive.com/forums/" id="searchlink" rel="subcontent">Search DD</a></p>


<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; left: 588px;">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" />
<input value="Search" class="topformbutton" type="submit" />
</form>

<div align="right"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

</DIV>

<p><a href="http://www.dynamicdrive.com/forums/" id="searchlink2" rel="subcontent2">Search DD</a></p>


<DIV id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px;">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" />
<input value="Search" class="topformbutton" type="submit" />
</form>

<div align="right"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

</DIV>

<script type="text/javascript">
//Call dropdowncontent.init(anchorID, positionString, glideduration) at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500)
dropdowncontent.init("contentlink", "left-top", 1000)

</script>

[jscheuer1]

There only appear to be two drop contents in your post, and their drop content is the same. You have only initialized one of them -

Replace:


<script type="text/javascript">
//Call dropdowncontent.init(anchorID, positionString, glideduration) at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500)
dropdowncontent.init("contentlink", "left-top", 1000)

</script>

with:


<script type="text/javascript">
//Call dropdowncontent.init(anchorID, positionString, glideduration) at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500)
dropdowncontent.init("searchlink2", "left-top", 1000)

</script>

Even after fixing that, you will see that the second one is mostly off screen. But that's where you've told the script to put it:


dropdowncontent.init("searchlink", "right-bottom", 500)
dropdowncontent.init("searchlink2", "left-top", 1000)

[poohster]

thanks John

i did manage to figure it out last night but not my menu script wont work :(

[poohster]

now my font images wont work within one of my content boxes where as it works on another page,

http://www.datzcreationzweddingstationery.co.uk/wedding%20stationery/grace.htm

this is where its working but using differne timages

http://www.datzcreationzweddingstationery.co.uk/wedding%20stationery/bonny.htm

just canr figure out why they wont show :(