Dropdown Content

[vanbao]

1) Script Title: Dropdown Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

3) Describe problem: Hi, first of all, this is a great script and I love it. I am wondering if it is possible to have the script be dismissed by a "close window" click rather than having it automatically dismissed after a certain time. Something similar to the dismiss function on Lightbox.

Also, is it possible to change the way the box shows up through an onlick versus a mouseover.


Thank you.

[virtual9]

I have essentially the same need. You may want to read my posts on this script also. (I am registered under virtual9 membership name).

Please feel free to contact me via my Dynamic Drive email address if you desire to collaborate on getting this script upgraded to meet our collective requirements.

[ddadmin]

Sure. Firstly, if you wish to change the behavior from revealing the Drop Down content onMouseover to onClick instead, remove the below three lines in gray and replace them with the new line in red instead:

anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}

If you wish to disable the Drop Down Content from disappearing when the mouse rolls out of it, remove the below line:

subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}

With this disabled, you'll want to add a link inside the Drop Down content to manually hide it. Just set the content's visibility to "hidden" somehow. For example:

<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="http://www.dynamicdrive.com">Dynamic Drive</a></div>

<a href="#" onClick="document.getElementById('subcontent').style.visibility='hidden'; return false">Hide Content</a>

</DIV>

[vanbao]

Thank you so much. You are awesome.

One more question.

For some reasons when this drop down box is activated over an area occupied by a goole map, it gets hidden behind the google map. Is there a way to make it so this dropdown content is always on top of whatever it is there.

Thanks.

[ddadmin]

Does the problem occur in just IE, or both IE and FF? IE is known for this issue with z-index.

[vanbao]

I have not tried it yet with FF. I will give it a swirl with FF and let you know the results.

[vanbao]

I saw in the JS file that there is a way to add user vertical offset for the dropdown box. How and where is this done? I would like the box to begin a couple of line down from where it begins now. Is there a way for me to say offset 3px in addition to selecting "left-bottom, right-bottom".

Thank you.

[ddadmin]

Yes, you can manually add a few pixels to either the horizontal or vertical offset by editing the below two lines:

			subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + 5 + "px"
			subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+10+"px"

Here I'm adding 5 and 10, respectively.

[vanbao]

Beautiful. Works perfectly. Thank you.

[vanbao]

Hi, regarding how the dropdown content hiding behind existing content, this happens in both IE and FF.

Is there anything we can do to make it always on top.

Here is a sample:
http://www.nailsnow.net/dropdown.html

Thanks.