Grow your CSS skills. Land your dream job.

JavaScript causes menu to disapear

  • # March 10, 2009 at 12:41 am

    I’ve got two sets of JavaScript on my website. The first JavaScript controls a two-level horizontal navigation bar, and the second JavaScript allows the changing of the sites theme by alternating the css file that is referenced. My problem is when these two codes are used together on the same page.

    Normally, when the page loads, a submenu appears beneath the main navigation menu. What’s happening is when I click on a button to change the sites them, the submenu will disappear in Internet Explorer (The problem is in IE only, everything works fine in Firefox, Safari and Opera). I’ve stretched my JavaScript coding capabilities to the max, and I can’t figure out how to solve this problem.

    A sample site can be seen here, http://www.thelosingedge.com/
    and the code used for the site is below:

    The HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    href="styles_green.css"/> href="styles_blue.css"/>


    onclick="switch_style('green');return false;"
    name="theme" value="Green Theme" id="green"/>
    onclick="switch_style('blue');return false;"
    name="theme" value="Blue Theme" id="blue"/>



    First JavaScript:

    Code:
    var mastertabvar=new Object()
    mastertabvar.baseopacity=100
    mastertabvar.browserdetect=””

    function showsubmenu(masterid, id){
    if (typeof highlighting!=”undefined”)
    clearInterval(highlighting)
    submenuobject=document.getElementById(id)
    mastertabvar.browserdetect=submenuobject.filters? “ie” : typeof submenuobject.style.MozOpacity==”string”? “mozilla” : “”
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display=”inline”
    instantset(mastertabvar.baseopacity)
    highlighting=setInterval(“gradualfade(submenuobject)”,50)
    }

    function hidesubmenus(submenuarray){
    for (var i=0; i document.getElementById(submenuarray[i]).style.display="none"
    }

    function instantset(degree){
    if (mastertabvar.browserdetect=="mozilla")
    submenuobject.style.MozOpacity=degree/100
    else if (mastertabvar.browserdetect=="ie")
    submenuobject.filters.alpha.opacity=degree
    }

    function initalizetab(tabid){
    mastertabvar[tabid]=new Array()
    var menuitems=document.getElementById(tabid).getElementsByTagName("li")
    for (var i=0; i
    if (menuitems[i].getAttribute("rel")){
    menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
    mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
    if (menuitems[i].className=="selected")
    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
    menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
    showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
    }
    }
    }
    }

    And Second JavaScript:

    Code:
    // *** TO BE CUSTOMISED ***

    var style_cookie_name = “style” ;
    var style_cookie_duration = 30 ;

    // *** END OF CUSTOMISABLE SECTION ***

    function switch_style ( css_title )
    {
    // You may use this script on your site free of charge provided
    // you do not remote this notice or the URL below. Script from
    // http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
    var i, link_tag ;
    for (i = 0, link_tag = document.getElementsByTagName(“link”) ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
    link_tag[i].title) {
    link_tag[i].disabled = true ;
    if (link_tag[i].title == css_title) {
    link_tag[i].disabled = false ;
    }
    }
    set_cookie( style_cookie_name, css_title,
    style_cookie_duration );
    }
    }
    function set_style_from_cookie()
    {
    var css_title = get_cookie( style_cookie_name );
    if (css_title.length) {
    switch_style( css_title );
    }
    }
    function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
    {
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
    (“; domain=” + valid_domain) : ” ;
    document.cookie = cookie_name +
    “=” + encodeURIComponent( cookie_value ) +
    “; max-age=” + 60 * 60 *
    24 * lifespan_in_days +
    “; path=/” + domain_string ;
    }
    function get_cookie ( cookie_name )
    {
    //
    http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
    var cookie_value = cookie_string.match (
    ‘(^|;)[s]*’ +
    cookie_name +
    ‘=([^;]*)’ );
    return decodeURIComponent ( cookie_value[2] ) ;
    }
    return ” ;
    }

    Thanks in advance for any help.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".