...

View Full Version : Resolved Drop down menu not working in google chrome



designedbyria
09-15-2011, 11:42 AM
Hi Guys,

I never really use Chrome but have just tested this site

The drop down menu works fine in Safari, Firefox, IE but doesn't really work at all in Chrome. Any ideas on why this could be?

Here is the HTML...


<div class="navigation">
<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="index.html" title="Home"><span>Home</span></a></li>
<li><a href="about.html" title="about"><span>About us</span></a></li>
<li><a href="school.html" title="services" rel="dropmenu1_a"><span>Services</span></a></li>
<li><a href="food.html" title="Food to Please" rel="dropmenu2_a"><span>Food to please</span></a></li>
<li><a href="testimonials.html" title="testimonials"><span>testimonials</span></a></li>
<li><a href="contact.html" title="contact"><span>contact</span></a></li>
</ul>
</div>

</div>

<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="school.html">Schools</a>
<a href="business.html">Business & Industry</a>
<a href="training.html">Training & Consultancy</a>
<a href="purchasing.html">Purchasing</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>



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

and the CSS


/*-------------navigation-----------*/


.navigation{
display:block;
width:100%;
height:40px;
background-color:#000;
}

.ddcolortabs{
margin-top:-5px;
padding: 0;
width: 100%;
}

.ddcolortabs ul{
font-size: 14px;
padding:0;
margin-left:290px;
margin-top:0px;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background-color: #000;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
padding: 10px 10px 8px 10px;
}

.ddcolortabs a:hover{
background-color: #64a941;
}

.ddcolortabs a:hover span{
background-color: #64a941;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #64a941;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
font-size: 13px;
text-transform:uppercase;
line-height:35px;
z-index:100;
background-color: #64a941;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 13px;
border-bottom: 1px solid #ffffff; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: #ffffff;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #000000;
color: #ffffff;
}


I'll stress that this code wasn't written by me - but modified. The original came from an online tutorial.

The Javascript (if this has anything to do with it) and this is just garble to me, I can't read java...


//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

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

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
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 (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
obj2.parentNode.className="selected"
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.standardbody.scrollLeft+this.standardbody.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.standardbody.scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.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
}
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null){ //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
this.previousmenuitem.parentNode.className=""
}
}
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
this.showhide(this.dropmenuobj.style, e, obj)
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.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
this.positionshim() //call iframe shim function
}
},

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

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu(obj2)
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu(obj2)
},

delayhidemenu:function(obj2){
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
},

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

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

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)
},

init:function(menuid, dselected){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))
}
}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
menuitems[i].parentNode.className+=" selected default"
var setalready=true
}
else if (parseInt(dselected)==i)
menuitems[i].parentNode.className+=" selected default"
}
}

}

All help appreciated!

Does anyone actually use Chrome?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum