SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling DIVs with Javascript in Mozilla

    I am making an IE / Mozilla compatible site. The menu system utilizes the "display" property of DIV blocks. What I want to have is when a user clicks on the main link, the sub-link menu pops up underneath.

    Code:
    function toggleMenu(event,contextid) {
      var divEl;
      divEl = document.getElementById(contextid);
    // If the menu is open, close all menus
      if (divEl.style.display == "") {
    	closeAllMenus();
      }
    // If the menu is closed, close all menus and open the selected menu
      else {
    	closeAllMenus();
    	divEl.style.display = "";
      }
      return false;
    }
    function closeAllMenus() {
    //closes all menus
    	indexmenuDIV.style.display = "none";
    	gallerymenuDIV.style.display = "none";
    	forummenuDIV.style.display = "none";
    	membersmenuDIV.style.display = "none";
    	profilemenuDIV.style.display = "none";
    	messagingmenuDIV.style.display = "none";
    	submitmenuDIV.style.display = "none";
    	helpmenuDIV.style.display = "none";
      return false;
    }
    This code works for IE6 but not Mozilla 1.5. I've narrowed the problem down to the closeAllMenus function and the call to it in the else statement in the toggleMenu function, but I can't see why nothing happens when I run the script in Mozilla.

  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)
    I'm guessing a bit, since you haven't shown us the HTML source, but here goes:

    Accessing the divs directly via their ID is actually equivalent to using the document.all interface. For example:
    Code:
    indexmenuDIV.style.display = "none";
    is pretty much the same as
    Code:
    document.all.indexmenuDIV.style.display = "none";
    The problem is the document.all only works in Internet Explorer.

    The fix is already present in your code: the W3C DOM document.getElementById() method.

    Try this slightly tweaked code:
    Code:
    function toggleMenu(event,contextid) {
      var divEl;
      divEl = document.getElementById(contextid);
      // If the menu is open, close all menus
      if (divEl.style.display != "none" ) {
        closeAllMenus(); 
      } // If the menu is closed, close all menus and open the selected menu
      else {
        closeAllMenus();
        divEl.style.display = "block";
      } 
    }
    
    function closeAllMenus() { //closes all menus
      document.getElementById("indexmenuDIV").style.display = "none";
      document.getElementById("gallerymenuDIV").style.display = "none";
      document.getElementById("forummenuDIV").style.display = "none"; 
      document.getElementById("membersmenuDIV").style.display = "none"; 
      document.getElementById("profilemenuDIV").style.display = "none"; 
      document.getElementById("messagingmenuDIV").style.display = "none"; 
      document.getElementById("submitmenuDIV").style.display = "none"; 
      document.getElementById("helpmenuDIV").style.display = "none"; 
    }
    I'll say again: I can't see the HTML this code is meant to manipulate, so I'm shooting blind. If the above doesn't work (or doesn't give enough of a clue so you can figure it out yourself), post the HTML or, ideally, a link to the site in action.

    If you get things right with getElementById, it should work just fine and dandy in Opera 7, too, and any other browser which supports the relevant standards (anybody? how good is Safari's DOM support?).

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dang that was fast! Wow and it worked too! Thanks. I guess Mozilla is quite strict about it's Java and CSS.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grrrr... I have another problem you seem qualified to answer

    [UPDATE] I solved some of the problems So I took them out of the post

    Here is my whole Script
    Code:
    function toggleMenu(event,contextid) {
      var divEl;
      divEl = document.getElementById(contextid + 'DIV');
      var highlightedItem;
      highlightedItem = contextid;
      
    // If the menu is open, close all menus
      if (divEl.style.display == "") {
    	closeAllMenus();
      }
    // If the menu is closed, close all menus and open the selected menu
      else {
    	toggleHighlight(highlightedItem);
    	closeAllMenus();
    	divEl.style.display = "";
      }
      return false;
    }
    function toggleHighlight (highlightedItem){
    // get the colour i want to copy
       var swabColour = document.getElementById('menuholderbottomcoloursample').style.color;
    // erase the old highlight
      document.getElementById("index" + "menu" ).bgColor = "";
      document.getElementById("gallery" + "menu" ).bgColor  = "";
      document.getElementById("forum" + "menu" ).bgColor  = ""; 
      document.getElementById("members" + "menu" ).bgColor = ""; 
      document.getElementById("profile" + "menu" ).bgColor  = ""; 
      document.getElementById("messaging" + "menu" ).bgColor  = ""; 
      document.getElementById("submit" + "menu" ).bgColor  = ""; 
      document.getElementById("help" + "menu" ).bgColor = ""; 
    // highlight by changing the CSS colour
      document.getElementById(highlightedItem).style.color = ('#555555');
    // highlight by changing the document color
      document.getElementById(highlightedItem).bgColor = ('#E5E1E1');
    	return false;
    }
    function closeAllMenus() {
    //closes all menus
      document.getElementById("indexmenuDIV" ).style.display = "none";
      document.getElementById("gallerymenuDIV" ).style.display = "none";
      document.getElementById("forummenuDIV" ).style.display = "none"; 
      document.getElementById("membersmenuDIV" ).style.display = "none"; 
      document.getElementById("profilemenuDIV" ).style.display = "none"; 
      document.getElementById("messagingmenuDIV" ).style.display = "none"; 
      document.getElementById("submitmenuDIV" ).style.display = "none"; 
      document.getElementById("helpmenuDIV" ).style.display = "none"; 
      return false;
    }
    [Deletion]

    In Mozilla, the buttons highlight as shown below.

    Furthermore, I can't use a variable to specify the highlight colour like I wan't to. Instead I have to hardcode it. See my other post. Hopefully someone out there has the answer.

    Thanks for reading this far,
    Nick.
    Last edited by Goldeneye; Aug 7, 2003 at 16:56.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The style property is 'backgroundColor' instead of 'bgColor'.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spiffy! Thanks. I changed
    Code:
    document.getElementById(highlightedItem).bgColor = ('#E5E1E1');
    to
    Code:
    document.getElementById(highlightedItem).backgroundColor = ('#E5E1E1');
    and it worked!
    Last edited by Goldeneye; Aug 7, 2003 at 18:16.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wierd! I thought it was fixed, but it seems that I was mistaken. I changed some more stuff and used 'backgroundColor' in place of 'bgColor'.

    Code:
    function toggleHighlight (highlightedItem){
    // get the colour i want to copy
       var swabColour = document.getElementById('menuholderbottomcoloursample').style.color;
    // erase the old highlight
      document.getElementById("index" + "menu" ).style.backgroundColor = "";
      document.getElementById("gallery" + "menu" ).style.backgroundColor = "";
      document.getElementById("forum" + "menu" ).style.backgroundColor = ""; 
      document.getElementById("members" + "menu" ).style.backgroundColor = ""; 
      document.getElementById("profile" + "menu" ).style.backgroundColor = ""; 
      document.getElementById("messaging" + "menu" ).style.backgroundColor = ""; 
      document.getElementById("submit" + "menu" ).style.backgroundColor = ""; 
      document.getElementById("help" + "menu" ).style.backgroundColor = ""; 
    // highlight by changing the CSS colour
      document.getElementById(highlightedItem).style.backgroundColor = "#E5E1E1";
    // highlight by changing the document color
    	return false;
    }
    This works. Thanks Mike.


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
  •