View Full Version : Drop down/ Overlapping Content script - Persistence Problem

07-31-2008, 04:43 PM
1) Script Title:
Drop down/ Overlapping Content script

2) Script URL (on DD):

3) Describe problem: I am using this script to add functionality to my nav menu. I don't have a page online yet. When I hover over the anchor link in the menu, the hidden content div pops up in place as it should. However, I am unable to roll mouse from the anchor link over the new div without the div disappearing. Sometimes it appears to work OK. The effect I want is like the search box link on the demo page - a div that has content in it that the user can interact with. I have added the close feature to one of the divs as well, but the problem still persists. I have two other divs setup to use the click feature rather than the mousover feature, and they work OK all the time. Any help would be appreciated.

Thanks as always!

Here is the script as I have it setup:

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
//3) Added hidediv(id) public function to directly hide drop down div dynamically

var dropdowncontent={
disableanchorlink: false, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
hidedivmouseout: [true, 250], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?

getposOffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
return false

show:function(anchorobj, subobj, e){
if (!this.isContained(anchorobj, e)){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.startTime=new Date().getTime()
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")

return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input

slideengine:function(obj, direction){
var elapsed=new Date().getTime()-obj.startTime //get time animation has run
if (elapsed<obj.glidetime){ //if time run is less than specified length
var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip=(distancepercent*obj.contentheight)+"px"
obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
else{ //if animation finished
obj.style.clip="rect(0 auto auto 0)"

hide:function(activeobj, subobj, e){
if (!dropdowncontent.isContained(activeobj, e)){
}, dropdowncontent.hidedivmouseout[1])


ajaxconnect:function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)

loadpage:function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.glidetime=glidetime || 1000
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
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 (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}

Here is the css that controls the hidden divs:
.mouseover {
visibility: hidden;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;
border: 2px solid #3db3e0;
background-color: #abe1f4;
width: 300px;
padding: 8px;
margin-left: 160px;
margin-top: -30px;

Here is the code from the page showing the divs etc.:

<!-- end #footer --></div>
<!-- end #container --></div>

<!-- Hidden Div's for Mousover events -->
<div id="duplicationcontent" class="mouseover"><span class="contentlink"><a style="float:right;" href="javascript:dropdowncontent.hidediv('duplicationcontent')">X</a></span><br />
<br />
Click to see more information about our duplication services, including video such as DVD's, VHS, 8mm tapes, other tape formats, foreign transfers from PAL/SECAM to NTSC, CD's, Audio Cassettes, and Digital Transfers to CD's from records, cassettes, 8-tracks and reel-to-reel. </div>

<div id="productioncontent" class="mouseover">Click to see more information about our production services, including videography, editing, special effects, DVD authoring, and Auto-Run CD's. <a href="javascript:dropdowncontent.hidediv('productioncontent')"></a></div>

<div id="videocontent" class="mouseover">Click to view some of our many video clips that showcase our work. <a href="javascript:dropdowncontent.hidediv('videocontent')"></a></div>

<script type="text/javascript" >qm_create(0,true,0,500,'all',false,false,false,false);</script><div id="dhtmltooltip"></div>

<script type="text/javascript" src="../scripts/tooltip.js"> </script><script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("calclink", "right-bottom", 500, "click")
dropdowncontent.init("searchlink", "right-bottom", 500, "click")
dropdowncontent.init("duplicationlink", "right-bottom", 250, "mouseover")
dropdowncontent.init("productionlink", "right-bottom", 250, "mouseover")
dropdowncontent.init("videolink", "right-bottom", 250, "mouseover")


07-31-2008, 05:00 PM
I have solved the problem myself. I added a z-index of 100 to my css and disabled the imageless arrows on the main menu links. The problem was occuring because the arrows were not actually part of the link, therefore making the script think that I had moused out...