Results 1 to 2 of 2

Thread: Drop down/ Overlapping Content script - Persistence Problem

  1. #1
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Drop down/ Overlapping Content script - Persistence Problem

    1) Script Title:
    Drop down/ Overlapping Content script

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

    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
    else
    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"){
    subobj.style.visibility="hidden"
    return
    }
    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.style.visibility="visible"
    subobj.startTime=new Date().getTime()
    subobj.contentheight=parseInt(subobj.offsetHeight)
    if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
    clearTimeout(window["hidetimer_"+subobj.id])
    this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
    }
    },

    curveincrement:function(percent){
    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)){
    window["hidetimer_"+subobj.id]=setTimeout(function(){
    subobj.style.visibility="hidden"
    subobj.style.left=subobj.style.top=0
    clearTimeout(window["glidetimer_"+subobj.id])
    }, dropdowncontent.hidedivmouseout[1])
    }
    },

    hidediv:function(subobjid){
    document.getElementById(subobjid).style.visibility="hidden"
    },

    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){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    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)
    page_request.send(null)
    },

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

    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.dropposition=pos.split("-")
    subobj.glidetime=glidetime || 1000
    subobj.style.left=subobj.style.top=0
    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}
    }
    else
    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 {
    position:absolute;
    visibility: hidden;
    color: #000000;
    font-size:14px;
    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")

    </script>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2007
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Drop down/ Overlapping Content script - Persistence Problem

    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...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •