Added appear Delay to Chrome CSS Drop Down Menu (v2.0)

[alekos]

just replace the chrome.js file

file chrome.js:



/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: June 14th, 06'

var cssdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
appeardelay: 300, //set delay in miliseconds before menu appears onmouseover
disablemenuclick: false, //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


//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()", 20)
},

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
setTimeout("cssdropdown.swipeeffect()",this.appeardelay)
}
this.delayshowmenu()
}
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();cssdropdown.clearshowmenu()}
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(){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+1+"px"
}
},

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'",this.disappeardelay) //hide menu
},

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

delayshowmenu:function(){
this.delayshow=setTimeout("cssdropdown.dropmenuobj.style.visibility='visible'",this.appeardelay)
},

clearshowmenu:function(){
if (this.delayshow!="undefined")
clearTimeout(this.delayshow)
},
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"))
}
}
}
}
}

}

[blm126]

Why would you want an appear delay?

[alekos]

that little delay will prevent the menu to appear when passing over with the mouse

when you have text boxes, links or buttons underneath the drop menu it's anoying to see the menu appear in top of it and having to wait until dissapear.

[jonovision]

Hey great work on the appear delay. But the iFrame shim is gone...

Any idea where I can find one that does both?

I love the SEO capabilities of the Chrome menu but the site I am working on must have the ability to go over a <select> tag in ie. (and flash in Linux) There are plenty of great drop downs out there but nothing that checks all those boxes...

Thanks

[Itlan]

I have partially added a "Show Delay" to version 2.5 of the Chrome CSS Menu. I am no expert in JavaScript, so what I've done may be completely ridiculous, but it works... most of the time. The problem I have seems to be in "consistency". What I mean is sometimes it doesn't work correctly if you hover over a menu item, then quickly hover over another menu item before the first menu appears. I didn't implement the Timer maintenance functions very well apparently.

Note: the lines I changed are commented out and a new line below it bears my nickname ITLAN.



//** Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)

//** Updated: Oct 29th, 08 to v2.5 (only .js file modified from v2.4)
//1) Added ability to customize reveal animation speed (# of steps)
//2) Menu now works in IE8 beta2 (a valid doctype at the top of the page is required)

var cssdropdown={
disappeardelay: 500, //set delay in miliseconds before menu disappears onmouseout
appeardelay: 500, //set delay in miliseconds before menu appears onmouseover //ITLAN
dropdownindicator: '',//'<img src="./down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 10], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

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;
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig");
if (action=="check")
return needle.test(el.className);
else if (action=="remove")
el.className=el.className.replace(needle, "");
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass;
return true;//ITLAN
},

showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight;
clearTimeout(this.revealtimers[dropmenu.id]);
dropmenu.style.height=dropmenu._curheight=0;
dropmenu.style.overflow="hidden";
dropmenu.style.visibility="visible";
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10);
}
else{
dropmenu.style.visibility="visible";
}
this.css(this.asscmenuitem, "selected", "add");
},

revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1];
if (curH<maxH){
var newH=Math.min(curH, maxH);
dropmenu.style.height=newH+"px";
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1;
}
else{ //if done revealing menu
dropmenu.style.height="auto";
dropmenu.style.overflow="hidden";
clearInterval(this.revealtimers[dropmenu.id]);
}
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0;
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera ? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15;
var dropmenuW=this.dropmenuobj.offsetWidth;
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth;
}
else{
var topedge=document.all && !window.opera ? this.standardbody.scrollTop : window.pageYOffset;
var windowedge=document.all && !window.opera ? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18;
var dropmenuH=this.dropmenuobj._trueheight;
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight;
if ((this.dropmenuobj.y-topedge)<dropmenuH) //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.hidemenu(); //hide menu
this.clearhidemenu();
this.dropmenuobj=document.getElementById(dropmenuID); //reference drop down menu
this.asscmenuitem=obj; //reference associated menu item
this.showmenu(this.dropmenuobj, 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+1+"px";
this.positionshim(); //call iframe shim function
},

positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";
this.shimobject.style.height=this.dropmenuobj._trueheight+"px";
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";
this.shimobject.style.display="block";
}
}
},

hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none';
},

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;
},

dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu();
}
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay); //hide menu
},

hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove");
this.dropmenuobj.style.visibility='hidden';
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";
this.hideshim();
},

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

delayshowmenu:function(functionref){//ITLAN
this.delayshow=setTimeout(functionref,this.appeardelay);
},

clearshowmenu:function(){//ITLAN
if (this.delayshow!="undefined")
clearTimeout(this.delayshow);
},

addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event);});
},

startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body;
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");
var asscdropdownmenu=document.getElementById(relvalue);
// this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu();}, "mouseover");
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu(); cssdropdown.clearshowmenu();}, "mouseover");//ITLAN
// this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e);}, "mouseout");
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e); cssdropdown.clearshowmenu();}, "mouseout");//ITLAN
// this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu();}, "click");
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu(); cssdropdown.clearshowmenu();}, "click");//ITLAN
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator;
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e;
// cssdropdown.dropit(this, evtobj, this.getAttribute("rel"));
relLink = this.getAttribute("rel");//ITLAN
menuitem = this;//ITLAN
cssdropdown.delayshowmenu(function(){cssdropdown.dropit(menuitem, evtobj, relLink);});//ITLAN
}
}, "mouseover");
// this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e);}, "mouseout"); //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e); cssdropdown.clearshowmenu();}, "mouseout"); //hide drop down menu when main menu items are mouse out //ITLAN
// this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu();}, "click"); //hide drop down menu when main menu items are clicked on
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu(); cssdropdown.clearshowmenu();}, "click"); //hide drop down menu when main menu items are clicked on //ITLAN
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');
this.shimobject=document.getElementById("iframeshim"); //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
this.iframeshimadded=true;
}
return false;
} //end startchrome

}


Please feel free to make corrects and post back here.