Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Unhappy Drop down menu not working in google chrome

    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?
    Last edited by designedbyria; 09-15-2011 at 11:58 AM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •