On Click, Show a Div and Hide Another

Discussion in 'Web Design and Development' started by MegaMan1311, Nov 17, 2007.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    I need some javascript that when I click on Go to Back, it hides the div "front" and shows the div "back". Thanks in advance!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Assuming you have HTML similar to this,
    HTML:
    <div id="front">...</div>
    <div id="back">...</div>
    ...<a href="javascript:GoToBack();">Go to Back</a>...
    Then you can use a function like so to do what you asked.
    Code:
    function GoToBack()
    {
      document.getElementById("front").style.display = "none";
      document.getElementById("back").style.display = "block";
    }
    Customize as need be.
     
  3. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    That didn't work. Does it also hide / show the divs inside of those two divs?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Hmm it works for me. It's only set to show "back" and hide "front" and not toggle, but could be made to do so. Yes, it will hide everything inside the "front" div tag. If you provide the code I might be able to tell what's up.
     
  5. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #5
    The Javascript: (In the Header)
    Code:
    <script type="text/javascript">
    function GoToBack()
    {
      document.getElementById("front").style.display = "none";
      document.getElementById("back").style.display = "block";
    }
    </script>
    HTML (Sorry for the messy code. I haven't cleaned it up yet.)
    HTML:
    <div id="front">
    <script language="JavaScript" src="http://thecybernetwork.net/feed/feed2js.php?src=http%3A%2F%2Fwww.thecybernetwork.net%2Frss.php&utf=y;targ=y" type="text/javascript"></script>	
    
    <noscript>
    <a href="http://thecybernetwork.net/feed/feed2js.php?src=http%3A%2F%2Fwww.thecybernetwork.net%2Frss.php&utf=y&html=y;targ=y">View RSS feed</a>
    </noscript>
    <div id="moveFront" style="cursor:move" class="moveRgn" onmousedown="window.nativeWindow.startMove();"><img src="transparent_move.png" alt="Move" width="20" height="20" id="move" onmouseover="MM_swapImage('move','','move.png',1)" onmouseout="MM_swapImgRestore()" /></div>
           
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><a href="javascript:GoToBack();">Go to Back</a></div>
    <div id='back'>
    		<div id='options'>
    			<form id='formName' action='tcn.html' method='post' name='formName' target='_self' onSubmit="load(); return false;">
    				<select name='feed' onChange='saveFeedPref();'>
    					<optgroup label='MegaMan News'>
    						<option value='http://www.thecybernetwork.net/rss.php?number=25'>Recent News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=6&number=25'>Classic News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=7&number=25'>X News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=8&number=25'>Legends News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=9&&number=25number=25'>Battle Network News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=10'>Zero News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=3&number=25'>ZX News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=4&number=25'>Starforce News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=5&number=25'>Capcom News</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=1&number=25'>Events</option>
    						<option value='http://www.thecybernetwork.net/rss.php?category=2&number=25'>The Cyber Network News</option>
    					</optgroup>
    				</select>
    			</form>
    		</div>
           </div>
    <div style="background:url(logo.png);cursor:pointer;width:185px;position:absolute;height:35px;top:55px;left:51px;" onClick="javascript:widget.openURL('http://www.thecybernetwork.net/');"></div>
    		<div id='doneButton'></div>
    CSS:
    Code:
    #front {
    	display: block;
    	background: url(Default.png) no-repeat;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 300px;
    	height: 180px;
    	z-index:0;
    }
    #back {
    	display: none;
    	background: url(Back.png) no-repeat;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 300px;
    	height: 180px;
    	z-index:0;
    }
    That is most of the code.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Well I copied and pasted the HTML and CSS you listed, and it works fine for me. When I click on the "Go to Back" link the stuff your script displays disappears and the drop down box appears.

    What behavior are you getting?
     
  7. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #7
    Weird... It's working now. Thanks for your help.
     

Share This Page