www.webdeveloper.com
Results 1 to 4 of 4

Thread: Menu to change content (im stuck lol)

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    13

    Menu to change content (im stuck lol)

    Hello all,
    So I have this code I have been trying to get working for a while now. I have it very close to working (I think). I am a noob to JS but learning fast.
    Basically I have a menu with 5 options and 5 divs, I would like the content to show when the matching menu item is clicked. I have set the CSS property
    to invisible for the divs. Any help is greatly appreciated
    HTML Code:
    <div class="main-area">
            <div id="menu1" class="menu">
            	<ul>
                	<li><a href="">Menu 1</a></li>
                </ul>
            </div>
            <div id="menu2" class="menu">
                <ul>
                	<li><a href="">Menu 2</a></li>
                </ul>
            </div>
            <div id="menu3" class="menu">
                <ul>
                	<li><a href="">Menu 3</a></li>
                </ul>
            </div>
            <div id="menu4" class="menu">
                <ul>
                    <li><a href="">Menu 4</a></li>
                </ul>
            </div>
            <div id="menu5" class="menu">
                <ul>
                    <li><a href="">Menu 5</a></li>
                </ul>
            </div>
            <br></br>
        	
            <div id="menu1Area" class="mainArea"><p>Text 1</p></div>
            <div id="menu2Area" class="mainArea"><p>Text 2</p></div>
            <div id="menu3Area" class="mainArea"><p>Text 3</p></div>
            <div id="menu4Area" class="mainArea"><p>Text 4</p></div>
            <div id="menu5Area" class="mainArea"><p>Text 5</p></div>
        </div>
    Code:
    window.onload = show;
    var activeMenu = null;
    
    function show() {
    	var menus = new Array();
    	var allElems = document.getElementsByTagName("*");
    	
    	for (var i = 0; i < allElems.length; i++) {
    		if (allElems[i].className == "menu") menus.push(allElems[i]);
    	}
    	for (var i = 0; i < menus.length; i++) {
    	menus[i].onclick = changeDiv;
    	}
    }
    function changeDiv(){
    	if (activeMenu) {
    		closeOldDiv();
    		
    		menuID = this.id + "Area";
    		activeMenu = document.getElementById(menuID);
    		activeMenu.style.visibility="visible";
    	}
    }
    function closeOldDiv() {
    	if (activeMenu) {
    		activeMenu.style.visibility="invisible";
    		activeMenu = null;
    	}
    }

  2. #2
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    .
    the function show does its job BUT
    your global var *activeMenu* stops anything from happening because it evaluates to false in your if statements.
    Maybe you meant to set it in the function show...

    throw your relevant css in for us... please

  3. #3
    Join Date
    Feb 2013
    Posts
    13
    Awesome! Thank you for pointing that out. So I removed the first IF just to test. Now the div appears for a second (if that) then disappears again. I had this same problem when my code was completely different and numerous functions for each div. Any idea why it wont stick?
    Code:
    #menu1Area {
    	visibility:hidden;
    }
    #menu2Area {
    	visibility:hidden;
    }
    #menu3Area {
    	visibility:hidden;
    }
    #menu4Area {
    	visibility:hidden;
    }
    #menu5Area {
    	visibility:hidden;
    }
    HTML Code:
    <div class="main-area">
            <div id="menu1" class="menu">
            	<ul>
                	<li><a href="">Menu 1</a></li>
                </ul>
            </div>
            <div id="menu2" class="menu">
                <ul>
                	<li><a href="">Menu 2</a></li>
                </ul>
            </div>
            <div id="menu3" class="menu">
                <ul>
                	<li><a href="">Menu 3</a></li>
                </ul>
            </div>
            <div id="menu4" class="menu">
                <ul>
                    <li><a href="">Menu 4</a></li>
                </ul>
            </div>
            <div id="menu5" class="menu">
                <ul>
                    <li><a href="">Menu 5</a></li>
                </ul>
            </div>
            <br></br>
            <div id="menu1Area" class="mainArea"><p>Text 1</p></div>
            <div id="menu2Area" class="mainArea"><p>Text 2</p></div>
            <div id="menu3Area" class="mainArea"><p>Text 3</p></div>
            <div id="menu4Area" class="mainArea"><p>Text 4</p></div>
            <div id="menu5Area" class="mainArea"><p>Text 5</p></div>
        </div>
    Code:
    window.onload = show;
    var activeMenu = null;
    
    function show() {
    	var menus = new Array();
    	var allElems = document.getElementsByTagName("*");
    	
    	for (var i = 0; i < allElems.length; i++) {
    		if (allElems[i].className == "menu") menus.push(allElems[i]);
    	}
    	for (var i = 0; i < menus.length; i++) {
    	menus[i].onclick = changeDiv;
    	}
    }
    function changeDiv(){
    	/*if (activeMenu) {*/
    		closeOldDiv();
    		
    		menuID = this.id + "Area";
    		activeMenu = document.getElementById(menuID);
    		activeMenu.style.visibility="visible";
    	/*}*/
    }
    function closeOldDiv() {
    	if (activeMenu) {
    		activeMenu.style.visibility="invisible";
    		activeMenu = null;
    	}
    }

  4. #4
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73


    you have finally got JS to put an inline style in place to make it visible BUT the css you have in place overrides it...

    when I do something like that I groan and yell *You silly B-u-g-g-a-r*

    to get a better idea on how to do things like this check out the post request by *Haxxy* he wanted divs to show when you click an image.

    you seem to want the same thing with a menu list...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles