PDA

View Full Version : drop down menu question



vjboc
06-08-2011, 11:07 PM
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

ajfmrf
06-09-2011, 01:56 AM
post the script you are talking about and also the page you made where the problem is.

Otherwise nobody can help you

vjboc
06-09-2011, 02:36 AM
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?

ajfmrf
06-09-2011, 03:16 AM
a link to the original script please

I don't see this anywhere
jquery.hoverintent.js
did you rename it?

vjboc
06-09-2011, 03:28 AM
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)
}

vjboc
06-09-2011, 03:31 AM
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(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);

ajfmrf
06-09-2011, 03:57 AM
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.

vjboc
06-09-2011, 11:18 AM
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

vjboc
06-10-2011, 12:01 PM
Is there anyone out there that knows the code to add to either one of these files to slow down dropdown menu when hovering.

ajfmrf
06-10-2011, 04:04 PM
The script located here-
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.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

vjboc
06-11-2011, 04:53 AM
Thanks Bud,

I still don't know how to add that to the files I have. If someone can help incorporate the hover delay to the files I have, I would greatly appreciate it,

Vinny