Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts

    html css javascript nav

    I am trying to use a simple class id navigation with html and css though the section element. One problem I have had is I cant wrap my head around a good way to load the initial section. The work around I thought would work involved a quick java script snippet(thanks to blaze). The code is below:

    Code:
    <html>
    <head></head>
    <style>
    #homePage {
      display:none;}
    
    #contactPage {
      display:none;}
        
    #homePage:target {
      display:block;}
      
    #contactPage:target {
      display:block;}
    </style>
    <script>
    var checkPage = function ()
    { 
    var contact = (document.getElementById("contactPage").style.display === 'block') ? true:false;
    var homeP = (document.getElementById("homePage").style.display === 'block') ? true:false;
    
    	if (contact === true){}
    	else if(homeP === true){}
    	else{	
    		document.getElementById("homePage").style.display='block';}
    };
    </script>
    
    <body onLoad="checkPage();">
    
    <nav><a href="#homePage">Home</a> | <a href="#contactPage">Contact</a></nave>
    <section id="homePage">
    I am Home!
    </section>
    <section id="contactPage">
    I want to talk too!
    </section>
    </body>
    </html>
    Any suggestions or alternatives to a simple one page navigation for turning on and off the display?

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Resolved.

    Code:
    <!DOCTYPE html>
    <head>
    <style>
    #homePage { display:block;}
    #aboutPage { display:none;}
    #productPage { display:none;}
    #contactPage { display:none;}
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1202671#post1202671
    
    function $_(IDS) { return document.getElementById(IDS); }
    function checkPage(info) {
      var tmp = '';
      var sel = document.getElementsByTagName('section');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id == info) { tmp = 'block' } else { tmp = 'none' }
        sel[i].style.display = tmp;
      }
      $_(info).style.display = 'block';
    }
    </script>
    </head>
    
    <body> 
    
    <nav>
    <a href="#" onclick="checkPage('homePage');return false">Home</a> | 
    <a href="#" onclick="checkPage('aboutPage');return false">About</a> | 
    <a href="#" onclick="checkPage('productPage');return false">Projects</a> | 
    <a href="#" onclick="checkPage('contactPage');return false">Contact</a> 
    </nav>
    
    <br><br>
    
    <section id="homePage"> I am Home! </section>
    <section id="aboutPage"> I am a fish. </section>
    <section id="productPage"> Its in a box. </section>
    <section id="contactPage"> I want to talk too! </section>
    
    </body>
    </html>


  •  

    Posting Permissions

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