Results 1 to 6 of 6

Thread: Chrome CSS drop down menu issue

  1. #1
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Chrome CSS drop down menu issue

    1) Script Title: Chrome CSS Drop Down Menu

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


    3) Describe problem: I have the Chrome CSS Drop Down Menu on my site and like it a lot; however, I do have an occasional issue with it. At times, when clicking on the links in the drop down it does nothing. It seems as if it is trying to process though with the cursor icon having the hourglass symbol and the windows icon in the upper right corner of the screen running as if it is processing; however, nothing happens. As well, the issue seems to happen with the internal pages and not the index page.

    Any advice and/or troubleshooting would be much appreciated. Thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Does the problem occur with the DD demo as well, or just on your own page. If the later, please post a link to the page on your site that contains the problematic script so we can check it out, and also include what browser(s) the problem occurs in.

  3. #3
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    The problem occurs on my own site when using IE. The link is www.theschoolmaster.org. Again, the problem occurs occasionally, and primarily on the internal pages. I'm including the javascript code below. Thank you for checking into this for me. Also, in your code, why is there a smiley icon?

    Thanks again for your help.

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    //Chrome Drop Down Menu v2.01- Author: Dynamic Drive (http://www.dynamicdrive.com)
    //Last updated: November 14th 06- added iframe shim technique

    var cssdropdown={
    disappeardelay: 150, //set delay in miliseconds before menu disappears onmouseout
    disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
    enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
    enableiframeshim: 1, //enable "iframe shim" technique to get drop down menus to correctly appear on top of controls such as form objects in IE5.5/IE6? 1 for yes, 0 for no

    //No need to edit beyond here////////////////////////
    dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

    getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    },

    swipeeffect:function(){
    if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
    this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
    this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
    }
    else
    return
    this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
    },

    showhide:function(obj, e){
    if (this.ie || this.firefox)
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    if (this.enableswipe==1){
    if (typeof this.swipetimer!="undefined")
    clearTimeout(this.swipetimer)
    obj.clip="rect(0 auto 0 0)" //hide menu via clipping
    this.bottomclip=0
    this.swipeeffect()
    }
    obj.visibility="visible"
    }
    else if (e.type=="click")
    obj.visibility="hidden"
    },

    iecompattest:function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    },

    clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
    if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
    edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
    if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
    edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
    if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    },

    dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
    this.dropmenuobj.style.visibility="hidden" //hide menu
    this.clearhidemenu()
    if (this.ie||this.firefox){
    obj.onmouseout=function(){cssdropdown.delayhidemenu()}
    obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
    this.dropmenuobj=document.getElementById(dropmenuID)
    this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
    this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
    this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
    this.showhide(this.dropmenuobj.style, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+5+"px"
    this.positionshim() //call iframe shim function
    }
    },

    positionshim:function(){ //display iframe shim function
    if (this.enableiframeshim && typeof this.shimobject!="undefined"){
    if (this.dropmenuobj.style.visibility=="visible"){
    this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
    this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
    this.shimobject.style.left=this.dropmenuobj.style.left
    this.shimobject.style.top=this.dropmenuobj.style.top
    }
    this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
    }
    },

    hideshim:function(){
    if (this.enableiframeshim && typeof this.shimobject!="undefined")
    this.shimobject.style.display='none'
    },

    contains_firefox:function(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    },

    dynamichide:function(e){
    var evtobj=window.event? window.event : e
    if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
    this.delayhidemenu()
    else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
    this.delayhidemenu()
    },

    delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay) //hide menu
    },

    clearhidemenu:function(){
    if (this.delayhide!="undefined")
    clearTimeout(this.delayhide)
    },

    startchrome:function(){
    for (var ids=0; ids<arguments.length; ids++){
    var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    var relvalue=menuitems[i].getAttribute("rel")
    menuitems[i].onmouseover=function(e){
    var event=typeof e!="undefined"? e : window.event
    cssdropdown.dropit(this,event,this.getAttribute("rel"))
    }
    }
    }
    }
    if (window.createPopup && !window.XmlHttpRequest){ //if IE5.5 to IE6, create iframe for iframe shim technique
    document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid XImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
    this.shimobject=document.getElementById("iframeshim") //reference iframe object
    }
    }

    }

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I just tested your page in IE7 and FF2, and after a while, I got to see what you were talking about as far as clicking on a link stalling sometimes. This occurred in both IE7 and FF2. My best guess at this point is that the problem is in fact due to your web site not always responding. This based on two observations:

    1) in FF2, when clicking on a menu link stalled the loading of the target page, I tried to reload the browser instead- the server wasn't responding either. When it finally did again after 10 seconds, clicking on the menu link worked again as well.

    2) In IE7, after having gone through all your menu pages eventually and the browser has cached all of them, clicking on the menu links repeatedly no longer produced any stalling. This suggests to me that with these pages cached and the browser no longer subject to your web site's ups and downs, the menu links also worked consistently.

    That's my theory at this point, that it has nothing to do with the menu itself, but your web site's inconsistent response, not always connecting and loading the requested page.

  5. The Following User Says Thank You to ddadmin For This Useful Post:

    renset (03-24-2008)

  6. #5
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for checking into this for me. Just one final question. Have you known of happening with other sites, and if so, is there a fix for this?

    Thanks again for your help.

  7. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    No, but assuming I'm right about the problem actually being your site not connecting every now and then, then this is actually a web hosting issue, and when it comes to that, there are obviously all sorts. But no, I haven't heard of another Chrome script user reporting a similar problem, whatever the cause may be.

  8. The Following User Says Thank You to ddadmin For This Useful Post:

    renset (03-24-2008)

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
  •