Web Analytics Made Easy -
StatCounter Expanding/Collapsing Menu works on its own, but not in page template - CodingForum

Announcement

Collapse
No announcement yet.

Expanding/Collapsing Menu works on its own, but not in page template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Expanding/Collapsing Menu works on its own, but not in page template

    I have a menu that I want to incorporate into a site design. The menu code was a freebie off the web -- which actually didn't work as downloaded. However, I did get it to work eventually.

    The menu on its own is here (not completely formatted, so forgive ugly sub-menus) and works in both IE and FireFox -- http://thetexasteam.com/menu.html (the menu items that are supposed to drop down are Property Types, benefits, Resources and The Team -- the others are just image links).

    Ok, so everything is peachy with the code and I'm ready to go. I plug it into the page and VOILA -- broken. It still works in IE, but not FireFox. here is a sample of the menu when in the complete page -- http://thetexasteam.com/menu-test1.html

    It seems that there is *something* about my page that breaks the menu in FireFox, but I cannot for the life of my figure it out.

    Both examples have the following in the header:

    Code:
    		<script language="JavaScript" src="menu_files/wrapscript.js"></script>
    		<script language="JavaScript">
    			// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
    			<!--
    			bAgent=navigator.userAgent;
    			btype=bAgent.substring(8,9);
    			isMac=(bAgent.indexOf("Mac")>=0);
    			isIE=(bAgent.indexOf("MSIE")>=0);
    			useframes=((isMac && isIE && btype<="3") || (btype<="2" && !(bAgent.indexOf("MSIE 3")>=0)));
    			function loader() {
    				if(!useframes) nsloading();
    			}
    			//-->
    		</script>
    The contents of wrapscript.js are as follows (The commented out lines under the Mozilla sections were a suggestion I tried, but didn't seem to make a difference.):

    Code:
    function initimages() {
    //	if (navigator.appName == "Microsoft Internet Explorer") {
    		standard = new MakeArray(9);
    		over = new MakeArray(9);
    		words = new MakeArray(9);
    	
    		standard[1].src="menu_files/property-types-off.gif";
    		standard[2].src="menu_files/benefits-off.gif";
    		standard[3].src="menu_files/resources-off.gif";
    		standard[4].src="menu_files/the-team-off.gif";
    
    		over[1].src="menu_files/property-types-on.gif";
    		over[2].src="menu_files/benefits-on.gif";
    		over[3].src="menu_files/resources-on.gif";
    		over[4].src="menu_files/the-team-on.gif";
    
    //	}
    	
    }
    
    function MakeArray(n) {
    	this.length = n+1;
    	for (var i = 0; i<=n; i++) {
    		this[i] = new Image();
    	}
    	return this;
    }
    if(navigator.userAgent.substring(0,9)>="Mozilla/3") initimages();
    
    function msover(num) {
    if(navigator.userAgent.substring(0,9)>="Mozilla/3") {
    	if(num==1) document.getElementById('RRp').src = over[1].src;
    	else if(num==2) document.getElementById('BBp').src = over[2].src;
    	else if(num==3) document.getElementById('CCp').src = over[3].src;
    	else if(num==4) document.getElementById('DDp').src = over[4].src; 
    
    //	if(num==1) RRp.src = over[1].src;
    //	else if(num==2) BBp.src = over[2].src;
    //	else if(num==3) CCp.src = over[3].src;
    //	else if(num==4) DDp.src = over[4].src;
    }
    }
       
    
    function msout(num) {
    if(navigator.userAgent.substring(0,9)>="Mozilla/3") {
    	if(num==1) document.getElementById('RRp').src = standard[1].src;
    	else if(num==2) document.getElementById('BBp').src = standard[2].src;
    	else if(num==3) document.getElementById('CCp').src = standard[3].src;
    	else if(num==4) document.getElementById('DDp').src = standard[4].src; 
    
    //	if(num==1) RRp.src = standard[1].src;
    //	else if(num==2) BBp.src = standard[2].src;
    //	else if(num==3) CCp.src = standard[3].src;
    //	else if(num==4) DDp.src = standard[4].src;
    }
    }
    
    function clikker1(a,b,c,d,f,g,h,i) {
    	if (a.style.display =='') {
    		a.style.display = 'none';
    	}
    	else {
     		a.style.display='';
    		b.style.display = 'none';
    		c.style.display = 'none';
    		d.style.display = 'none';
    
    
    		f.src = over[1].src;
    		g.src = standard[2].src;
    		h.src = standard[3].src;
    		i.src = standard[4].src;
    
    	}
    }
    
    function clikker2(a,b,c,d,f,g,h,i) {
    	if (a.style.display =='') {
    		a.style.display = 'none';
    	}
    	else {
     		a.style.display='';
    		b.style.display = 'none';
    		c.style.display = 'none';
    		d.style.display = 'none';
    
    		f.src = standard[1].src;
    		g.src = over[2].src;
    		h.src = standard[3].src;
    		i.src = standard[4].src;
    
    	}
    }
    
    function clikker3(a,b,c,d,f,g,h,i) {
    	if (a.style.display =='') {
    		a.style.display = 'none';
    	}
    	else {
     		a.style.display='';
    		b.style.display = 'none';
    		c.style.display = 'none';
    		d.style.display = 'none';
    
    
    		f.src = standard[1].src;
    		g.src = standard[2].src;
    		h.src = over[3].src;
    		i.src = standard[4].src;
    
    	}
    }
    
    function clikker4(a,b,c,d,f,g,h,i) {
    	if (a.style.display =='') {
    		a.style.display = 'none';
    	}
    	else {
     		a.style.display='';
    		b.style.display = 'none';
    		c.style.display = 'none';
    		d.style.display = 'none';
    
    		f.src = standard[1].src;
    		g.src = standard[2].src;
    		h.src = standard[3].src;
    		i.src = over[4].src;
    
    	}
    }
    
    function nsloadingir() {
    // setting up layers for Netscape 4.x and above
    if(navigator.appName == "Netscape" && parseInt(navigator.appVersion)>=4) {
    		document.layers["HeadTop"].top = 5;
    		document.layers["Head1"].top = document.layers["HeadTop"].top+document.layers["HeadTop"].document.height-4;
    		//document.layers["Head1"].top = 105;
    		document.layers["Menu1"].top = document.layers["Head1"].top+document.layers["Head1"].document.height;
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Menu2"].top = document.layers["Head2"].top+document.layers["Head2"].document.height;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Menu3"].top = document.layers["Head3"].top+document.layers["Head3"].document.height;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["Menu4"].top = document.layers["Head4"].top+document.layers["Head4"].document.height;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    		document.layers["HeadTop"].visibility = "show";
    		document.layers["Head1"].visibility = "show";
    		document.layers["Head2"].visibility = "show";
    		document.layers["Head3"].visibility = "show";
    		document.layers["Head4"].visibility = "show";
    		document.layers["HeadBottom"].visibility = "show";
    
    	}
    	return true;
    }
    
    function nsloading() {
    // setting up layers for Netscape 4.x and above
    if(navigator.appName == "Netscape" && parseInt(navigator.appVersion)>=4) {
    		document.layers["HeadTop"].top = 80;
    		document.layers["Head1"].top = document.layers["HeadTop"].top+document.layers["HeadTop"].document.height-4;
    		//document.layers["Head1"].top = 105;
    		document.layers["Menu1"].top = document.layers["Head1"].top+document.layers["Head1"].document.height;
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Menu2"].top = document.layers["Head2"].top+document.layers["Head2"].document.height;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Menu3"].top = document.layers["Head3"].top+document.layers["Head3"].document.height;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["Menu4"].top = document.layers["Head4"].top+document.layers["Head4"].document.height;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    		document.layers["HeadTop"].visibility = "show";
    		document.layers["Head1"].visibility = "show";
    		document.layers["Head2"].visibility = "show";
    		document.layers["Head3"].visibility = "show";
    		document.layers["Head4"].visibility = "show";
    		document.layers["HeadBottom"].visibility = "show";
    
    	}
    	return true;
    }
    
    function nsmouseover(n) {
    	if(parseInt(navigator.appVersion)>=4) {
    		if(n==1) document.layers["Head1"].document.images[0].src = over[1].src;
    		else if(n==2) document.layers["Head2"].document.images[0].src = over[2].src;
    		else if(n==3) document.layers["Head3"].document.images[0].src = over[3].src;
    		else if(n==4) document.layers["Head4"].document.images[0].src = over[4].src;
    
    	}
    	else if(parseInt(navigator.appVersion)==3){
    		if(n==1) document.images["Head1"].src=over[1].src;
    		else if(n==2) document.images["Head2"].src=over[2].src;
    		else if(n==3) document.images["Head3"].src=over[3].src;
    		else if(n==4) document.images["Head4"].src=over[4].src;
    	}
    }
    
    function nsmouseout(n) {
    	if(parseInt(navigator.appVersion)>3) {
    		if(n==1) document.layers["Head1"].document.images[0].src = standard[1].src;
    		else if(n==2) document.layers["Head2"].document.images[0].src = standard[2].src;
    		else if(n==3) document.layers["Head3"].document.images[0].src = standard[3].src;
    		else if(n==4) document.layers["Head4"].document.images[0].src = standard[4].src;
    	}
    	else if(parseInt(navigator.appVersion)==3){
    		if(n==1) document.images["Head1"].src=standard[1].src;
    		else if(n==2) document.images["Head2"].src=standard[2].src;
    		else if(n==3) document.images["Head3"].src=standard[3].src;
    		else if(n==4) document.images["Head4"].src=standard[4].src;
    	}
    }
    function nsclikker1() {
    if(parseInt(navigator.appVersion)>3) {
    	if( document.layers["Menu1"].visibility == "hide") {
    		document.layers["Menu1"].visibility = "show";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    		document.layers["Head2"].top = document.layers["Menu1"].top+document.layers["Menu1"].document.height;
    		document.layers["Head3"].top = document.layers["Head2"].top+document.layers["Head2"].document.height-4;
    		document.layers["Head4"].top = document.layers["Head3"].top+document.layers["Head3"].document.height-4;
    		document.layers["HeadBottom"].top = document.layers["Head4"].top+document.layers["Head4"].document.height-4;
    
    	}
    	else {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    	}
    }
    }
    function nsclikker2() {
    if(parseInt(navigator.appVersion)>3) {
    	if( document.layers["Menu2"].visibility == "hide") {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "show";
    
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top+document.layers["Menu2"].document.height;
    		document.layers["Head4"].top = document.layers["Head3"].top+document.layers["Head3"].document.height-4;
    		document.layers["HeadBottom"].top = document.layers["Head4"].top+document.layers["Head4"].document.height-4;
    
    
    	}
    	else {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    		
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    	}
    }
    }
    function nsclikker3() {
    if(parseInt(navigator.appVersion)>3) {
    	if( document.layers["Menu3"].visibility == "hide") {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "show";
    		document.layers["Menu4"].visibility = "hide";
    
    
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top+document.layers["Menu3"].document.height;
    		document.layers["HeadBottom"].top = document.layers["Head4"].top+document.layers["Head4"].document.height-4;
    
    
    	}
    	else {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    		
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    	}
    }
    }
    
    function nsclikker4() {
    if(parseInt(navigator.appVersion)>3) {
    	if( document.layers["Menu4"].visibility == "hide") {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "show";
    
    
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top+document.layers["Menu4"].document.height;
    
    
    	}
    	else {
    		document.layers["Menu1"].visibility = "hide";
    		document.layers["Menu2"].visibility = "hide";
    		document.layers["Menu3"].visibility = "hide";
    		document.layers["Menu4"].visibility = "hide";
    
    		
    		document.layers["Head2"].top = document.layers["Menu1"].top-4;
    		document.layers["Head3"].top = document.layers["Menu2"].top-4;
    		document.layers["Head4"].top = document.layers["Menu3"].top-4;
    		document.layers["HeadBottom"].top = document.layers["Menu4"].top-4;
    
    	}
    }
    }
    I won't make this any longer by posting the HTML code, but it is the same on both files and can be seen in the source here -- http://thetexasteam.com/menu.html

    If anyone can help me figure out what it is about my page design that breaks the menu in FireFox, I'd be eternally greatful.

  • #2
    Is there more info I could provide that might be helpful in getting help? Please, let me know if there is something more I need to provide.

    Comment


    • #3
      Here is the problem. Your functions are meant to call names of divs however Firefox doesn't work the same IE does. It knows a name is not an id. You have three options.
      1) Change your clickrr functions to something like this
      Code:
      function clikker1(a,b,c,d,f,g,h,i) {
      	if (document.getElementById(a).style.display =='') {
      		document.getElementById(a).style.display = 'none';
      	}
      	else {
       		document.getElementById(a).style.display='';
      		document.getElementById(b).style.display = 'none';
      		document.getElementById(c).style.display = 'none';
      		document.getElementById(d).style.display = 'none';
      
      
      		document.getElementById(f).src = over[1].src;
      		document.getElementById(g).src = standard[2].src;
      		document.getElementById(h).src = standard[3].src;
      		document.getElementById(i).src = standard[4].src;
      
      	}
      }
      Then your function call for clikker1 would be
      Code:
      clikker1('RR2','BB2','CC2','DD2','RRp','BBp','CCp','DDp');
      2) Leave your clikker functions alone and change your clikker1 function call to this
      Code:
      clikker1(document.getElementById('RR2'),document.getElementById('BB2'),document.getElementById('CC2'),document.getElementById('DD2'),document.getElementById('RRp'),document.getElementById('BBp'),document.getElementById('CCp'),document.getElementById('DDp'))
      3) Remove this from your main page
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      though I really don't recommend that because it might make your page look differently among browsers.
      ||||If you are getting paid to do a job, don't ask for help on it!||||

      Comment

      Working...
      X