Displaying hidden content when page loads.

[chrisrox]

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...

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

[gph]

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'
  }
}

[gph]

Just thinking, this would be more efficient using CSS

div{
display:none
}

#home{
display:block
}

then remove hidem(); from the init() function

[chrisrox]

Thats awesome, thanks for the help gph.

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

[gph]

Glad it works for you. If this page is setup to work in javascript disabled browsers you might want to document.write the CSS

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