Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: drop down menu question

  1. #1
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default drop down menu question

    http://www.dynamicdrive.com/jquery.hoverintent.js

    Dropdown menu with jquery.hoverintent.js and anylink menu.js

    I am trying to slow down the drop of the menu when hovering over the links. I have a search box below the links.

    Is there a code to delay when the menu drops down?

    Or is there a code I need to add to the script?

    Thanks in advance,
    Vinny

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default you need to

    post the script you are talking about and also the page you made where the problem is.

    Otherwise nobody can help you

  3. #3
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The website is www.qpricing.com
    When hovering the blue links, I want the drop down menu to have a delay before it drops down.

    There are 2 scripts: anylinkmenu.js and jquery.hoverintent.js
    Do you want me to display everything in them files?

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default post

    a link to the original script please

    I don't see this anywhere
    jquery.hoverintent.js
    did you rename it?
    Last edited by ajfmrf; 06-09-2011 at 03:21 AM. Reason: add question

  5. #5
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is the anylinkmenu.js

    var disappeardelay=250; //menu disappear speed onMouseout (in miliseconds)
    var enableanchorlink=1; //Enable or disable the anchor link when clicked on? (1=e, 0=d)
    var hidemenu_onclick=1; //hide menu when user clicks within menu? (1=yes, 0=no)

    /////No further editting needed

    var ie5=document.all;
    var ns6=document.getElementById&&!document.all;

    function getposOffset(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;
    }

    function showhide(obj, e, visible, hidden){
    if (ie5||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }

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

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

    function dropdownmenu(obj, e, dropmenuID){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    if (typeof dropmenuobj!="undefined") //hide previous menu
    dropmenuobj.style.visibility="hidden"
    clearhidemenu()
    if (ie5||ns6){
    obj.onmouseout=delayhidemenu
    dropmenuobj=document.getElementById(dropmenuID)
    if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
    dropmenuobj.onmouseover=clearhidemenu
    dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
    showhide(dropmenuobj.style, e, "visible", "hidden")
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    return clickreturnvalue()
    }

    function clickreturnvalue(){
    if ((ie5||ns6) && !enableanchorlink) return false
    else return true
    }

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

    function dynamichide(e){
    if (ie5&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }

    function delayhidemenu(){
    delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
    }

    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

  6. #6
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is the jqueryhoverintent.js Sorry for the long files

    (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(o b.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hove rIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
    Last edited by vjboc; 06-09-2011 at 03:39 AM.

  7. #7
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default Why

    Do you want the dropdown to be delayed?You mention the search below the menu?

    Maybe yo should change it from mouseover to click.That way it wont drop until a button is clicked on.That is an option on the demo page
    BTW- I like the way the page works with the menu as is myself....

    I see nothing in the script that will give control as to delaying the mouseover and I am not sure if that can be done or not.

    Of course I am by no means as well versed as others here in particular John.

    Maybe one of the guru's will be able to confirm or deny the mouseover delay for the dropdown effect for you.
    Last edited by ajfmrf; 06-09-2011 at 04:16 AM. Reason: why

  8. #8
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the response. The reason for mentioning search is for when people want o use the search, sometime their curser hits the links and causes the menu to drop quickly and gets in the way. I am probably making abigger deal out of it than anybody else. It would be nice to delay the drop down a little when hovered. I'm sure there is a code or I hope anyways.

    Thanks again
    Last edited by vjboc; 06-09-2011 at 11:23 AM.

  9. #9
    Join Date
    Jun 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is there anyone out there that knows the code to add to either one of these files to slow down dropdown menu when hovering.

  10. #10
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default Look here

    The script located here-
    http://www.dynamicdrive.com/dynamici...daccordion.htm

    Has a delay for mouseover I believe.

    But I am not versed enough to figure out how to adapt it to you script.

    Maybe someone else can help-sorry

    Bud

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
  •