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.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    > why is it that this script only works when placed below the content in the body,

    Clearly you haven't been reading Felgall's posts...or his website.

    Anyway, *NO* JavaScript can use document.getElementById or getElementsByClassName or any of the other "get" methodologies if it is invoked *BEFORE* the browser has laid out all the HTML that defines the looked-for elements.

    In the traditional (also known as "old fashioned" or, per Felgall, "obsolete") placement of JS in the <head> of the page, you have to use various techniquest to make sure the JS does not even TRY to execute until after the page is loaded.

    Typically, that means you put all the JS in some function (e.g., function initializePage( ) ... ) and then do either window.onload = initializePage; or <body onload="initializePage()">

    It works. But isn't it kind of clumsy? Doesn't it make more sense to simply put the JS at the *END* of the page, so that all the HTML is already laid out and ready to be used?

    Oh...and putting it at the end makes the HTML load faster, too, in many circumstances.

    Anyway, go find a post by Felgall and then follow the link to his website, etc.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  2. #17
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks again for everything Old Pedant!! I think I HAVE read that actually, but JS really confuses me!!! I'll take a look at his posts for sure!!

  3. #18
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Hope all this code is allowed.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Fun With Feet </title>
    <style type="text/css">
    .foot_pain { display: none;
                 position: relative;
                 width: 80%;
    }
    
    div.tabBody { position: absolute; top: 40px; left: 0px; 
                  width: 100%; height: 100%;
                  z-index: 1; 
                  background-color: yellow; border: solid brown 2px; 
                  padding: 20px; 
                }
    div.tabHead { position: absolute; top: 20px; left: 10px; 
                  width: 100px; height: 22px;
                  z-index: 2;
                  cursor: pointer;
                  text-align: center; 
                  background-color: lightyellow; border: solid brown 2px; border-bottom: none;
                }
    
    div.Symptoms { display: block; }
    div.Causes, div.Treatments { display: none; }
    
    </style>
    </head>
    
    <body>
    <img src="images/foot_pain.jpg" slt="" usemap="#myMap" />
    <map name="myMap" id="myMap">
        <area shape="rect" coords="127,37,188,67" href="" alt="foot_bottom1" />
        <area shape="rect" coords="145,84,172,109" href="" alt="foot_bottom2" />
        <area shape="rect" coords="52,157,79,181" href="" alt="foot_bottom3" />
        <area shape="rect" coords="387,39,421,67" href="" alt="foot_bottom4" />
        <area shape="rect" coords="598,77,627,102" href="" alt="foot_bottom5" />
        <area shape="rect" coords="621,109,649,133" href="" alt="foot_bottom6" />
        <area shape="rect" coords="670,66,702,88" href="" alt="foot_bottom7" />
    </map>
    </div>
    <div id="foot_pain_container">
        <div class="foot_pain" id="foot_bottom1"><h4>Metatarsalgia</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 1
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 1
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 1
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom2"><h4>Morton's Syndrome</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 2
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 2
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 2
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom3"><h4>Plantar Faciitis</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 3
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 3
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 3
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom4"><h4>Test Pain</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 4
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 4
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 4
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom5"><h4>Another Test Pain</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 5
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 5
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 5
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom6"><h4>Heel Pain</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 6
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 6
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 6
            </div>
        </div>
        <div class="foot_pain" id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4>
            <div class="tabHead">Symptoms</div>
            <div class="tabHead" style="left: 140px;">Causes</div>
            <div class="tabHead" style="left: 260px;">Treatments</div>
            <div class="tabBody Symptoms">
                 These are symptoms for foot_bottom 7
            </div>
            <div class="tabBody Causes">
                 These are CAUSES for foot_bottom 7
            </div>
            <div class="tabBody Treatments">
                 And TREATMENTS for foot_bottom 7
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    (
      function() /* anonymous master function */
      {
          // a hack for MSIE 7 et al.
          function divsByClassName( container, cname )
          {
              if ( container.getElementsByClassName != null ) 
              {
                  return container.getElementsByClassName( cname );
              }
              // for older MSIE:
              var check = container.getElmentsByTagName("div");
              var divs = [ ];
              for ( var c = 0; c < check.length; ++c )
              {
                  var div = check[c];
                  if ( div.className.indexOf(cname) >= 0 ) { divs.push[div]; }
              }
              return divs;
          }
              
          showHideDivs = divsByClassName( document.getElementById("foot_pain_container"), "foot_pain" );
      
          // set up the tabs in each foot_pain div:
          var allTabs = divsByClassName( document, "tabHead" );
          for ( var t = 0; t < allTabs.length; ++t )
          {
              allTabs[t].onclick = front;
          }
    
          function front( )
          {
              var holder = this.parentNode; // should be a div with class "foot_pain"
              var bodies = divsByClassName( holder, "tabBody" );
              // could have used a loop, but why for only 3:
              bodies[0].style.display = bodies[1].style.display = bodies[2].style.display = "none";
              // then "turn on" the appropriate body:
              divsByClassName( holder, this.innerHTML )[0].style.display = "block";
          }
    
          // then set up map areas
          var areas = document.getElementById('myMap').areas;
          for( var i=0; i < areas.length; i++)
          {
              areas[i].style.cursor = "pointer";
              areas[i].onclick = showCorrespondingDiv;
          }
    
          function showCorrespondingDiv( ) 
          {
              for ( var i = 0; i < showHideDivs.length; ++i )
              {
                 showHideDivs[i].style.display = 'none';
              }
              var show = document.getElementById(this.alt);
    
              // always reset to Symptoms tab...*** OPTIONAL ***
              var bodies = divsByClassName( show, "tabBody" );
              bodies[0].style.display = "block";
              bodies[1].style.display = bodies[2].style.display = "none";
              // end of optional
    
              show.style.display = "block";
              return false;
          }
    
       } /* end of anonymous master function */
    
    )(); /* self-invoke the master function */
    </script>
    </body>
    </html>

    Thanks again for this Old Pedant, it really helps. I have a question about styling .tabHead for Symptoms, Causes and Treatment. I was successful with styling each of these as you outlined, but I want to take it one step further and indicate to the reader which tab they are currently reading... given that all 3 tab heads are the same id, I am having trouble achieving what I want.

    I feel like this is going to be something very obvious that I'm overlooking, but I've been racking my CSS brain and can only style all three tabs together (again, because it's the same id).

    Could I get your help again? Thanks so much for your time.

  4. #19
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by diggitydang11 View Post
    Thanks again for this Old Pedant, it really helps. I have a question about styling .tabHead for Symptoms, Causes and Treatment. I was successful with styling each of these as you outlined, but I want to take it one step further and indicate to the reader which tab they are currently reading... given that all 3 tab heads are the same id, I am having trouble achieving what I want.

    I feel like this is going to be something very obvious that I'm overlooking, but I've been racking my CSS brain and can only style all three tabs together (again, because it's the same id).

    Could I get your help again? Thanks so much for your time.
    Can anyone give me a hand on this? Any help would be greatly appreciated.

    Thanks!


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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