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 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Tabbed Content nested in a Javascript image map

    Hi there,

    I would appreciate some help, if anyone out there is in a position to help a newbie coder... I have a jQuery image map that renders subsequent divs below the image, based on where the user clicks (i.e. image map). Within those divs, I'm trying to include tabbed content... I've tried both jquery and pure css methods for those tabs, but each time, the tabbed content doesn't appear. Here is the code I'm using:

    This is the script for the image map:

    <script type="text/javascript">
    function showHideDivs(indx){
    hideDivs();
    oShowHideDivs[indx].style.display = 'block';
    }
    function hideDivs(){
    for(i=0; i < oShowHideDivs.length; i++){
    oShowHideDivs[i].style.display = 'none';
    }
    }

    window.onload=function(){
    oShowHideDivs = document.getElementById('foot_pain_container').getElementsByTagName('div');
    var oMap = document.getElementById('myMap');
    for(i=0; i < oMap.areas.length; i++){
    oMap.areas[i].indx = i;
    oMap.areas[i].onclick=function(){showHideDivs(this.indx);return false;}
    }
    }
    </script>


    This is the code for the image map:

    <img src="images/foot_pain.jpg" alt="" 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 id="foot_bottom1"><h4>Metatarsalgia</h4><p>Lorem Metatarsalgia ipsum.</p></div>

    <div id="foot_bottom2"><h4>Morton's Syndrome</h4><p>Lorem Morton ipsum.</p></div>

    <div id="foot_bottom3"><h4>Plantar Faciitis</h4><p>Lorem Plantar ipsum.</p></div>

    <div id="foot_bottom4"><h4>Test Pain</h4><p>Lorem Dang ipsum.</div>

    <div id="foot_bottom5"><h4>Another Test Pain</h4><p>Lorem Schleien ipsum.</p></div>

    <div id="foot_bottom6"><h4>Heel Pain</h4><p>Lorem Heel ipsum.</p></div>

    <div id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4><p>Lorem Hallux ipsum.</p></div>

    </div>

    My stylesheet for the above includes:
    #foot_pain_container div {display: none;}


    What I'm trying to achieve:
    I'm trying to put tabbed content in the div's from "foot_bottom1" to "foot_bottom5", with "Symptoms, Causes and Treatment" as my tabs.

    Can anyone help with that? I hope I've made my intentions clear... have a happy holidays everyone and thanks so much!!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Ummm..."I have a jQuery image map..."

    I don't see one lick of jQuery in there.

    Which is good, because I don't use jQuery.

    But would you mind if I rewrote this to what I think would be a better way?

    One that would avoid "ordering" problems?
    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.

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Uhhhh, whoooops!!! See, I told you I was a newb!!! Ha!! Where is the "embarrassed" emoticon!?

    Sorry... I actually realized that it wasn't jquery part-way through writing and I missed a couple spots changing the post...

    I am totally open to changing the code around... Thanks so much for your help!! I think you've helped me before too!! You are awesome and I will buy you a beer if we ever met!!

    Thanks so much.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Here. This seems to work.

    Basically, I just used the alt to match up with the id of the corresponding <div>. You already had all the alt's set up right, so it was easy.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Fun With Feet </title>
    <style type="text/css">
    #foot_pain_container div {display: none;}
    </style>
    </head>
    
    <body>
    <img src="images/foot_pain.jpg" alt="" 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 id="foot_bottom1"><h4>Metatarsalgia</h4><p>Lorem Metatarsalgia ipsum.</p></div>
        <div id="foot_bottom2"><h4>Morton's Syndrome</h4><p>Lorem Morton ipsum.</p></div>
        <div id="foot_bottom3"><h4>Plantar Faciitis</h4><p>Lorem Plantar ipsum.</p></div>
        <div id="foot_bottom4"><h4>Test Pain</h4><p>Lorem Dang ipsum.</div>
        <div id="foot_bottom5"><h4>Another Test Pain</h4><p>Lorem Schleien ipsum.</p></div>
        <div id="foot_bottom6"><h4>Heel Pain</h4><p>Lorem Heel ipsum.</p></div>
        <div id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4><p>Lorem Hallux ipsum.</p></div>
    </div>
    
    <script type="text/javascript">
    (
      function() /* anonymous master function */
      {
          showHideDivs = document.getElementById('foot_pain_container').getElementsByTagName('div');
          
          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';
              }
              document.getElementById(this.alt).style.display = "block";
              return false;
          }
    
       } /* end of anonymous master function */
    
    )(); /* self-invoke the master function */
    </script>
    </body>
    </html>
    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.

  • #5
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant... however, I'm not sure if I was clear in my initial post. The image map works just fine (although I appreciate the cleaned up code and will update that portion accordingly). What I was trying to get help on was putting tabbed content inside of the displayed divs that appear when one of the image map spots are clicked. So, when the user gets to the page, they click on one of their pain points in their foot. It displays information below the image (which worked fine and is even cleaner with your last post!). But within that newly displayed div, I'd like to have tabbed content which includes Symptoms, Causes and Treatment. The user would see the Symptoms tab open, and can go to Causes or Treatment in a tabbed format.

    Does that make sense? Is this something you can also help me with? Either way, I appreciate you taking the time to look at this.

  • #6
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    In case the last post wasn't clear, I want the div, "foot_bottom1" to show tabbed content... 3 tabs...

    Then, foot_bottom2, to have it's own 3 tabs generated...

    and so forth...

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    LOL! MAN, I *SURE* didn't get that from your first post!

    Not hard at all! Back soon.
    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.

  • #8
    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
    LOL! MAN, I *SURE* didn't get that from your first post!

    Not hard at all! Back soon.
    My bad... My communication skills are as strong as my coding skills!!! Hahahaha.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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>
    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.

  • Users who have thanked Old Pedant for this post:

    diggitydang11 (12-20-2012)

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Things you can change in the style:
    Code:
    <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;
                }
    You *CAN* also change some of the other values. Such as top for the tabBody and tabHead and height for the tabHead and and padding for tabBody.

    Beyond that, if you play with values, make sure they work.
    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.

  • Users who have thanked Old Pedant for this post:

    diggitydang11 (12-20-2012)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by diggitydang11 View Post
    My bad... My communication skills are as strong as my coding skills!!! Hahahaha.
    Well, my READING skills aren't too hot, for sure. When I go back and reread what you wrote, I sure see what you meant. I just skipped too much first time through, I think.
    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.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    And note that one of the important changes I made was assigning "foot_pain" class name to all those second-level <div>s. Could have avoided it, but since I wanted to be able to use getElementsByClassName (or the MSIE 7 hack equivalent) for other reasons, it was easier to just put them in.
    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.

  • #13
    New Coder
    Join Date
    Oct 2012
    Location
    Toronto, Ontario, Canada
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks again Old Pedant... it worked like a charm!!! I'm just playing with some of the styling now and seeing what I can break!!!

    I appreciate your time, generosity and coding skills!!! Thanks also for going the extra mile to let me know stuff that I can change and changes you made to the code so I can learn from it too!!

    Have a happy holiday and new year!!

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    I think the nice part about all that is how little JS code there really is.

    Sure, we could have used jQuery to do all this, but why, when the vanilla JS is so small, already?
    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.

  • #15
    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
    I think the nice part about all that is how little JS code there really is.

    Sure, we could have used jQuery to do all this, but why, when the vanilla JS is so small, already?
    True... but for newbs like me, I would never be able to write JS by myself, so I do like jQuery when it's available... but if it's a short script, I don't mind throwing straight JS into my pages...

    Hey, by the way, why is it that this script only works when placed below the content in the body, as opposed to how I've typically seen JS in the header or footer?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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