PDA

View Full Version : Dropdown Content



vanbao
01-16-2008, 06:36 PM
1) Script Title: Dropdown Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.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
01-16-2008, 10:04 PM
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
01-17-2008, 09:11 AM
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
01-18-2008, 01:05 AM
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
01-18-2008, 12:26 PM
Does the problem occur in just IE, or both IE and FF? IE is known for this issue with z-index.

vanbao
01-18-2008, 10:42 PM
I have not tried it yet with FF. I will give it a swirl with FF and let you know the results.

vanbao
01-20-2008, 08:36 AM
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
01-20-2008, 03:04 PM
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
01-20-2008, 06:36 PM
Beautiful. Works perfectly. Thank you.

vanbao
01-21-2008, 11:48 PM
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.

ddadmin
01-22-2008, 04:02 AM
Ah, in your case, the problem is easy to solve, as it's just a basic z-index issue (I was thinking of something else to do with Flash, select objects etc). In your HTML page:


<div id="subcontent" style="border: 9px solid orange; padding: 8px; position: absolute; visibility: hidden; background-color: white; width: 500px; top: 0pt; left: 0pt; clip: rect(0pt, auto, auto, 0pt); z-index: 100">

The code in red is new.

bradymc
02-27-2008, 11:01 PM
Is there an easy way to make the onclick event be a toggler? So that on the first click the content drops down and on the second click it retracts?

bradymc
02-28-2008, 05:18 PM
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.

I'm trying to add some pixels (OK, technically I'm subtracting them) to the horizontal offset... only if the position value is set to "right-top" or "right-bottom". I tried the following for "right-bottom" but couldn't get it to work. I tried several different variables other than "subobj.dropposition" since I wasn't 100% sure which one it was, but still no luck.

if (subobj.dropposition == "right-bottom") {
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset - 400 + "px"
} else {
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
}

ddadmin
02-29-2008, 07:31 AM
Regarding further refining the script to turn clicking into a toggler for showing/hiding the drop down content, try the below modified dropdowncontent.js.

bradymc
02-29-2008, 01:13 PM
Well, I was on the right track. I had done the same thing except I forgot the word "return". I guess that's why it would only toggle once until I refreshed. Thanks for the help.

zanson
05-14-2008, 09:24 PM
Im having trouble with this overlaying flash. it always goes behind the flash.

i have the style z-index at 100 for the div.
div code:


<DIV id="menu_products" class="menu_items" style="z-index:100">
<ul>
<li><a href="sensaphone_400.php" title="Model 400">Model 400</a>
</li>
<li><a href="sensaphone_800.php" title="Model 800">Model 800</a>

</li>
<li><a href="sensaphone_1400.php" title="Model 1400">Model 1400</a>
</li>
<li><a href="sensaphone_1800.php" title="Model 1800">Model 1800</a>
</li>
<li><a href="sensaphone_2800.php" title="Model 2800">Model 2800</a>
</li>

<hr> <li><a href="ims_4000.php" title="IMS 4000">IMS 4000</a>
</li>
<li><a href="ims_1000.php" title="IMS 1000">IMS 1000</a>
</li>
<hr> <li><a href="sensaphone_2000.php" title="Sensaphone 2000">Sensaphone 2000</a>
</li>

<li><a href="stationsitter.php" title="STATIONSitter">STATIONSitter</a>
</li>
<li><a href="scada_3000.php" title="SCADA 3000">SCADA 3000</a>
</li>
<li><a href="express_2.php" title="Express II">Express II</a>
</li>
<li><a href="skymetry.php" title="Skymetry">Skymetry</a>

</li>
<hr> <li><a href="accessories.php" title="Accesories">Accesories</a>
</li>
</ul>
</DIV>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("menulink1", "right-bottom", 100, 'mouseover')
</script>




heres the flash code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="852" height="179" class="flash_area" title="sensaphone Flash">
<param name="movie" value="flash/sensaphone_new_flash.swf" />
<param name="quality" value="high" />
<embed src="flash/sensaphone_new_flash.swf" style="z-index:0;" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="852" height="179"></embed>
</object>

ddadmin
05-15-2008, 07:44 AM
Zanson:
In the future please start a new thread when asking your own question on a script. Regarding the question, the z-index issue with Flash content has been discussed many times on the forums already. Please do a search to see if any of these threads help you.

zanson
05-15-2008, 01:23 PM
sorry about that, will do.

richardvc
11-25-2008, 09:17 PM
Hi,

I am facing problem when the dropdown DIV contains long select HTML element.

When I try to click on dropdown, the DIV disappears.

Is this due to Z-index? It was not happening in IE6.

It is happening in IE7 and all verisons of Firefox.

Any help is greatly appreciated.

Thanks
Rich
http://www.customsurveyor.com

richardvc
11-25-2008, 10:06 PM
I had a work-around by commenting the mouse-out events in js file.

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

and

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


Thanks
Rich
http://www.customsurveyor.com