PDA

View Full Version : Css Chrome - Sub Level - Javascript Errors



complexity
01-24-2007, 01:19 AM
1) Script Title: Chrome CSS Drop Down Menu 2.0

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

3) Describe problem:

http://www.dynamicdrive.com/forums/showthread.php?t=8604&highlight=chrome+level

I added that sub level add on to my site. Which seems to work perfect.

http://dev3.iwire.com.au/menu.htm

Under Chiro Care. But the first level sticks. The second level doesn't. When you mouse out on it.

The add on seems to have some javascript errors.

I really need this to work does anyone have any idea. What I need to do.

fattchris
02-08-2007, 11:47 PM
So, after much time I have figured out how to pull this off. Let me first state that I am in no way a great programmer, and am aware that this may be the sloppiest way to do this, and make no claim that I rock in any way shape or form, but I did get it to work, and here it is.

first half of chrome.js

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

var nohide = 0;

var cssdropdown={
disappeardelay: 250, //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){
globale = e
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 toplevelhide(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+1+"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(){

if (nohide == 0)
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay) //hide menu

},

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


}




see next post for second half of chrome.js

fattchris
02-08-2007, 11:48 PM
second half of chrome.js... simply add this to the end of the file


//test same code, but different name and with dropright instead of dropit

var cssdropdown1={
disappeardelay: 250, //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("cssdropdown1.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
},


dropright:function(obj, e, dropmenuID){
nohide=1
if (this.ie||this.firefox){
obj.onmouseout=function(){
cssdropdown1.delayhidemenu()


}
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown1.clearhidemenu()}

this.dropmenuobj.onmouseout=function(){
cssdropdown1.dynamichide(e)
}

this.dropmenuobj.onclick=function(){cssdropdown1.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e, "visible", "hidden")
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")+obj.offsetWidth+1+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight-23+"px"
}
},

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("cssdropdown1.dropmenuobj.style.visibility='hidden'; cssdropdown1.hideshim(); nohide=0; cssdropdown.delayhidemenu()",this.disappeardelay) //hide menu




},

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

}
},



}

see next post for html example

fattchris
02-08-2007, 11:49 PM
here is my html example...


<link rel="stylesheet" type="text/css" href="chromestyle.css" />

<script type="text/javascript" src="chrome.js">

</script>

<div class="chromestyle" id="chromemenu">


<ul><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')"><img src="images/menu_02.gif" width="63" height="22" border="0" /></a></li><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')"><img src="images/menu_03.gif" width="62" height="22" border="0" /></a></li><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu4')"><img src="images/menu_04.gif" width="83" height="22" border="0" /></a></li><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu5')"><img src="images/menu_05.gif" width="81" height="22" border="0" /></a></li><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu6')"><img src="images/menu_06.gif" width="72" height="22" border="0" /></a></li><li><a href="about_calendar.php" style="cursor:pointer;"><img src="images/menu_08.gif" height="22" border="0" /></a></li><li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu7')"><img src="images/menu_07.gif" width="48" height="22" border="0" /></a></li>
</ul>

</div>


<!--2 about-->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="about_history.php">history</a>
<a href="about_table.php">the table</a>
<a href="about_ourfaith.php">our faith</a>
<a href="about_baptism.php">baptism</a>
<a href="about_multisite.php">multi-site</a>
<a href="about_staff.php">leadership team</a>
<a href="about_inthenews.php">in the news</a>
</div>

<!--3 media-->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="video_archive.php">videos</a>
<a href="media_downloads.php">downloads</a>
<a href="media_livingreal.php">living real radio</a>
<a href="media_podcast.php">podcast</a>
</div>

<!--4 ministries-->
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="ministries_lifegroups.php">life groups</a>
<a href="ministries_livingfree.php">living free</a>
<a href="ministries_kidsworld.php">kidsworld</a>
<a href="ministries_underground.php">underground</a>
<a href="ministries_housechurch.php">house church</a>
<a href="ministries_ecclesia.php">ecclesia</a>
<a href="ministries_unleashed.php">unleashed</a>
<a href="ministries_one23.php">one 23</a>
<a href="ministries_one45.php">one 45</a>
<a href="ministries_womenofhope.php">women of hope</a>
<a href="ministries_compassioninaction.php">compassion in action</a>
<a href="ministries_godsgarage.php">Gods garage</a>
<a href="ministries_otheroutreach.php">other outreach</a>
<a href="ministries_leadersgathering.php">leaders gathering</a>
<a href="ministries_onlygod.php">only God churches</a>
<a href="javascript:void(0)" onMouseover="cssdropdown1.dropright(this,event,'sub_drop1')">Sub Test</a>
</div>

<!--5 resources-->
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="resources_blogs.php">blogs</a>
<a href="resources_forum.php">forum</a>
<a href="resources_links.php">links</a>
</div>

<!--6 connect-->
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="connect_communicationcard.php">communication card</a>
<a href="connect_volunteer.php">volunteer!</a>
<a href="onlinegiving.php">onilne giving</a>
<a href="prayerstories.php">prayer / stories</a>
<a href="connect_newsletter.php">newsletter</a>
</div>

<!--7 info-->
<div id="dropmenu7" class="dropmenudiv" style="width: 150px;">
<a href="info_contact.php">contact</a>
<a href="info_servicetimes.php">service times</a>
<a href="info_directions.php">directions</a>
<a href="info_faq.php">FAQ</a>
</div>

<div id="sub_drop1" class="dropmenudiv" style="width: 150px;" >
<a href="ministries_lifegroups.php">life groups</a>
<a href="ministries_lifegroups.php">life groups</a>
<a href="ministries_lifegroups.php">life groups</a>
<a href="ministries_lifegroups.php">life groups</a>
<a href="ministries_lifegroups.php">life groups</a>
</div>



feel free to ask questions, hope this helps someone.

P.S... this is my first ever post providing code examples, so if I posted something wrong, sorry.