-
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
-
-
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
-
-
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?
-
-
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
-
-
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)
}
-
-
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.
-
-
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
-
-
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.
-
-
Is there anyone out there that knows the code to add to either one of these files to slow down dropdown menu when hovering.
-
-
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
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks