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.
function hidesubmenus(submenuarray){ for (var i=0; i<submenuarray.length; 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<menuitems.length; 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:
// *** 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 '' ; }
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:
First JavaScript:
And Second JavaScript:
Thanks in advance for any help.