SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggle menu in multiple browsers

    I'm trying to get his little toggle menu script to run in multiple browsers without any luck. Can anyone suggest a workaround? It works for me in IE6 but mozilla doesn't like it

    Code:
    <HTML>
    <HEAD>
    <TITLE>toggle foo</TITLE>
    <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
    <!-- Hide script from older browsers
    function toggleMenu(currMenu) {
    if (document.all) {
    	thisMenu = eval("document.all." + currMenu + ".style")
    	if (thisMenu.display == "block") {
    	 thisMenu.display = "none"
    	}
    	else {
    	 thisMenu.display = "block"
    	}
    	return false
    }
    else {
    	return true
    }
    }
    // End hiding script -->
    </SCRIPT>
    <STYLE TYPE="TEXT/CSS">
    #menu1 {display:none; margin-left:20px}
     
    </STYLE>
    </HEAD>
    <BODY BGCOLOR=WHITE>
    <H3>
    <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A>
    </H3>
    <SPAN ID="menu1">
    heres my text to display <BR>
    heres my text to display<BR>
    heres my text to display<BR>
    heres my text to display
    </SPAN>
    <H3>other stuff<h3> 
    </BODY>
    </HTML>

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that you're using document.all, which only works in Internet Explorer.

    Replace the toggleMenu fuction with this (disclaimer: I've not tested this)
    Code:
    function toggleMenu(currMenu) {
    Code:
    if (document.getElementById) {
      	thisMenu = document.getElementById(currMenu).style; 
        } else if (document.all) {  
      	thisMenu = document.all[currMenu].style;
        } else {  
      	return true;
        }
      
        if (thisMenu.display == "block") {  
      	thisMenu.display = "none"
        } else {  
      	thisMenu.display = "block"
        }
      
        return false;
      }

    That should work in Netscape 6+ and Mozilla. With any luck, it'll work in Opera too, and anything else that supports the W3C DOM.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks blufive but it didn't work. I get an error on the page on line 37 right by the <a> tag. "object expected" Any suggestions on getting around that???

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (Apologies for the delay, I've been away for the weekend)

    I got it working fine here, in Mozilla Firebird and IE6, with this code:
    HTML Code:
    <HTML>
     <HEAD>
     <TITLE>toggle foo</TITLE>
     <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
     <!-- // Hide script from older browsers
     function toggleMenu(currMenu) {
     	if (document.getElementById) {
     	  thisMenu = document.getElementById(currMenu).style; 
     	} else if (document.all) {  
     	  thisMenu = document.all[currMenu].style;
     	} else {  
     	  return true;
     	}
       
     	if (thisMenu.display == "block") {  
     	  thisMenu.display = "none"
     	} else {  
     	  thisMenu.display = "block"
     	}
       
     	return false;
       }
     // End hiding script -->
     </SCRIPT>
     <STYLE TYPE="TEXT/CSS">
     #menu1 {display:none; margin-left:20px}
     </STYLE>
     </HEAD>
     <BODY BGCOLOR=WHITE>
     <H3>
     <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A>
     </H3>
     <SPAN ID="menu1">
     heres my text to display <BR>
     heres my text to display<BR>
     heres my text to display<BR>
     heres my text to display
     </SPAN>
     <H3>other stuff<h3> 
     </BODY>
     </HTML>

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks blufive. Whats up with taking the weekend off huh? just kidding. that's probably what i should start doing...

    That's working great. But now what happens if I want to add a second menu?
    I just tried doing it this way:
    Code:
    <HTML>
     <HEAD>
     <TITLE>toggle foo</TITLE>
     <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
     <!-- // Hide script from older browsers
     function toggleMenu(currMenu) {
      if (document.getElementById) {
    	thisMenu = document.getElementById(currMenu).style; 
      } else if (document.all) {  
    	thisMenu = document.all[currMenu].style;
      } else {  
    	return true;
      }
       
      if (thisMenu.display == "block") {  
    	thisMenu.display = "none"
      } else {  
    	thisMenu.display = "block"
      }
       
      return false;
       }
     // End hiding script -->
     </SCRIPT>
     <STYLE TYPE="TEXT/CSS">
     #menu1 {display:none; margin-left:20px}
     </STYLE>
     </HEAD>
     <BODY BGCOLOR=WHITE>
     <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A><br>
     <SPAN ID="menu1">
     heres my text to display <BR>
     heres my text to display<BR>
     heres my text to display<BR>
     heres my text to display
     </SPAN>
     <A HREF="#" onClick="return toggleMenu('menu2')">Toggle Me2</A><br>
     <SPAN ID="menu2">
     heres my text to display2 <BR>
     heres my text to display2<BR>
     heres my text to display2<BR>
     heres my text to displa2y
     </SPAN>
     <H3>other stuff<h3> 
     </BODY>
     </HTML>
    What's happening is that the second menu is expanded by default and not collapsed like "menu1" when the page is initially loaded.

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bingymon

    What's happening is that the second menu is expanded by default and not collapsed like "menu1" when the page is initially loaded.
    Probably because you don't have this line in your css
    #menu2 {display:none; margin-left:20px}
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! It's usually somthing small that gets ya. Thanks!


Bookmarks

Posting Permissions

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