Problem Drop down/ Overlapping Content script

[timbo64]

1) Script Title:
Drop down/ Overlapping Content script

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

3) Describe problem:

Hi All,

my problem is that the drop down content via mouserollover simply does not appear. I tried to follow the steps and the description, but i cant find my problem/what i missed out to do. If i include the byclick dropdown, it works, just not the rollover dropdown effect works...

Here are the steps which i undertook:
- Step1: Include ... in the head
- Downloaded the dropdown.js (i havent touched this one yet)
- Put in the code into the body part step2
- Included the css code in my external css file
- And i tried to include the description with the red highlighted comments, please check the code in my html file below:


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

<div id="searchlink" rel="subcontent">
<div id="subcontent" 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="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a> | <a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
</div>

</div>

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


can you have a look at it please and try to help me... Thanks
Timbo

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[timbo64]

Hi,

i went over all the different steps and instructions and got it worked more or less. Now i have the problem that the onclick layer pops up at the right buttom of the page...
Where i can adjust the position of the pop up layer? Please check the link below and click on additional links:
http://jasonsaint-online.net/hp_redesign/social_buttons/music.html

thanks in advance,
timbo

[ddadmin]

Try moving the HTML for the drop down content DIV and the JavaScript initialization code to the end of the page, right above the closing </body> tag:



<div id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; width: 350px; height: 120px; padding: 4px;">

<div style="width: 49%; float: left">
<a href="http://www.dynamicdrive.com">Dynamic Drive</li>
<a href="http://www.javascriptkit.com">JavaScript Kit</li>
<a href="http://www.cssdrive.com">CSS Drive</li>
<a href="http://www.codingforums.com">Coding Forums</li>

</div>

<div style="width: 49%; float: left">

<a href="http://www.dynamicdrive.com">Dynamic Drive</li>
<a href="http://www.javascriptkit.com">JavaScript Kit</li>
<a href="http://www.cssdrive.com">CSS Drive</li>
<a href="http://www.codingforums.com">Coding Forums</li>

</div>

<div align="left"><a href="javascript:dropdowncontent.hidediv('subcontent2')"></a></div>

</div>

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

dropdowncontent.init("searchlink", "left-top", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")

</script>

</body>

[timbo64]

Hi,

i fixed this problem now, but another one is now arising:
the thing is that i want is to open up the layer a layer on multiple onclick links/images. So if a user clicks on a img the layer opens at the left over the background img (guy who plays the piano), where the "stay on top" layer is, and not directly around the link.

so every link/img opens up a different layer with different content, but at the same position. The links of course are positioned differently.

check out the link so you will see my problem:
http://www.jasonsaint-online.net/hp_redesign/social_buttons/music.html

thanks,
Tim

[ddadmin]

Just to make sure I understood this correctly, are you saying you wish to have all the drop down content appear directly below the anchor image to the left of ""If music was a woman", instead of below their respective anchor images?

[timbo64]

No to the left but with a space between it over the background image, with a little space between the anchor image and the layer. For example where the guy plays the piano...

[ddadmin]

Ok, try the below modified .js file. It lets you display all the drop down content DIVs relative to a particular anchor link on your page, plus an additional x and y offset of your choice. With that, you should be able to display all the drop down DIVs at a precise point on the page, such as somewhere close to the Piano Man background image.

Inside the .js file near the top, find and modify the below line:


contentcoords: {rootid: 'contentlink', offsets:[-100, -50]},

Where "rootid" should be set to the ID of the anchor link all the drop down DIVs should be shown relative to, then the additional x and y offsets from that point on the page.

[timbo64]

Hey Thanks thats great!

just to make sure i can put here the different lines in for the different divs i will create?

var dropdowncontent={
contentcoords: {rootid: 'subcontent2', offsets:[150, 50]},
contentcoords: {rootid: 'subcontent3', offsets:[550, 50]},
disableanchorlink: true, //when user clicks on anchor link, should link ......

the problem is that i cannot position the two layers differently with that. The only follow the last one. So they always will be on different positions. With two links there wont be any problem but with ten or even more (like planned) it does not look good, especially, if there will be opened up more than one layer....
please check here:
http://www.jasonsaint-online.net/hp_redesign/social_buttons/music.html

am i doing anything wrong?
thanks for helping me so much...
tim