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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displaying hidden content when page loads.

    The content of my webpage is all contained in hidden divs. These divs are shown when a link in the nav bar is clicked.

    At the moment, ALL divs are hidden on page load, only the nav bar is visible. Is there a way to have one of the divs visable when the page loads? i.e the 'home' page.

    Here is the code, borrowed from alistapart.com...

    Code:
    function init(){
      if(document.getElementById && document.createTextNode){
        var mn=document.getElementById('nav');
        var as=mn.getElementsByTagName('a');
        for (var i=0;i<as.length;i++){
          as[i].onclick=function(){show(this);return false}
          as[i].onkeypress=function(){show(this);return false}
        }		
        hidem();
      }
    }  
    			
    function show(l){
      hidem();
      var id=l.href.match(/#(\w.+)/)[1];
      document.getElementById(id).style.display='block';
    }
    			
    function hidem(){
      for (var i=0;i<document.getElementsByTagName('div').length;i++){
        document.getElementsByTagName('div')[i].style.display='none';
      }
    }
    The function init() is called on page load.

    Thanks,

    Chris
    Last edited by chrisrox; 10-23-2005 at 05:30 AM.

  • #2
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function init(){
      if(document.getElementById && document.createTextNode){
        var mn=document.getElementById('nav');
        var as=mn.getElementsByTagName('a');
        for (var i=0;i<as.length;i++){
          as[i].onclick=function(){show(this);return false}
          as[i].onkeypress=function(){show(this);return false}
        }		
        hidem();
        document.getElementById('home').style.display='block'
      }
    }

  • #3
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just thinking, this would be more efficient using CSS

    Code:
    div{
    display:none
    }
    
    #home{
    display:block
    }
    then remove hidem(); from the init() function
    Last edited by gph; 10-23-2005 at 06:21 AM.

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats awesome, thanks for the help gph.

    So simple, kind of embarassing I didn't think of that...

  • #5
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glad it works for you. If this page is setup to work in javascript disabled browsers you might want to document.write the CSS

    Code:
    document.write('<link href="js_enabled.css" rel="stylesheet" type="text/css">')


  •  

    Posting Permissions

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