Getting Div to show on load

pa007 · August 24th, 2007, 06:14 PM

I have a bit of JS which sets divs with a certain class to display:none; and then when one is clicked it set that one (the div that link is linked to) to display: block; but all the others to display: none; So essentialy it swaps them.

My problem is that I would like the very first div to actually be displayed when the page is loaded and I wondered how I would achieve this. As it is all of my divs are hidden when the page loads.

Below is the relevant HTML:

Code:

<div id="primary_services">
        <h1>Services<h1>
        <div class="section" id="intro">
          <h2>Introduction</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
        
        <div class="section" id="web">
          <h2>Web</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
        
        <div class="section" id="print">
          <h2>Print</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>        <div class="section" id="identity">
          <h2>Identity</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
      </div>

And the JS so far:

Code:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function showSection(id) {
  var divs = document.getElementsByTagName("div");
  for (var i=0; i<divs.length; i++ ) {
    if (divs[i].className.indexOf("section") == -1) continue;
    if (divs[i].getAttribute("id") != id) {
      divs[i].style.display = "none";
    } else {
      divs[i].style.display = "block";
    }
  }
}

function prepareInternalnav() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("services")) return false;
  var nav = document.getElementById("services");
  var links = nav.getElementsByTagName("a");
  for (var i=0; i<links.length; i++ ) {
    var sectionId = links[i].getAttribute("href").split("#")[1];
    if (!document.getElementById(sectionId)) continue;
    document.getElementById(sectionId).style.display = "none";
    links[i].destination = sectionId;
    links[i].onclick = function() {
      showSection(this.destination);
      return false;
    }
  }
}

addLoadEvent(prepareInternalnav);

As you can see my mark-up is free of any JS so I'm not looking for solutions that involve inline JS. There is probably a pretty simple solution but it eludes me. Would it work if I added a new class to the first div and then basically said if a dive has this new class then it should display: block; ? would something this simple work?

Hope you can help.

Pete.

pa007 · August 25th, 2007, 02:15 PM

This is sorted now.

Pete.