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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Getting div to show on load

    All of the different sub-forums and guidelines confused me a bit. So I hope I'm ok posting here. 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 dive 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 its been physically, emotionally, and mentally 
              exhausting/invigorating.</p>
              <p>Id 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 its been physically, emotionally, and mentally 
              exhausting/invigorating.</p>
              <p>Id 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 its been physically, emotionally, and mentally 
              exhausting/invigorating.</p>
              <p>Id 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 its been physically, emotionally, and mentally 
              exhausting/invigorating.</p>
              <p>Id 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.

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Code:
    addLoadEvent(function(){showSection('intro')});
    That work for ya?
    Helping to build a bigger box. - Adam Matthews

  • Users who have thanked Basscyst for this post:

    pa007 (08-27-2007)

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That's brilliant mate. I see now it was all set up for it as well. Stupid me.

    Another question, how do I change the actual link when it is clicked. All I want to do is set the clicked anchor to background: transparent; and then make sure all the other have a bg color applied and when a different on is selected the same will happen (the selected is background:transparent and the others have one set). Do I need to go through all of this again or is there a simpler way?

    Again, thankyou so much,

    Pete.

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    You'll have to do the same thing for the links as you did for the divs, loop through them and set the background, as you did to set the display of the divs.

    Then just add the new function into the onclick event for the links. Or you can just loop through the links in the same function that you are looping through the divs in which case you would not need to update the onclick event.

    Make sense?
    Helping to build a bigger box. - Adam Matthews

  • Users who have thanked Basscyst for this post:

    pa007 (08-27-2007)


  •  

    Posting Permissions

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