SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33

Thread: Tabs

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tabs

    Hello,
    I have a page on my site which i am remodeling and below is what I am trying to do.

    The content on the page makes it rather long but it is split into smaller sections (about 5-6 of these) I want to have a small bar near the top with images of tabs on them. I want these when clicked to show the content of the <div> which they belong to, just below them. I ahve tried using the code shown just below and it works but you can have 2 or more tabs open at the same time which defeats the object by building all the page content up in one long list again! I want it so that when someone clicks a tab then all other tabs are closed ad the clicked one opens. Anyone know an easier way to do this?


    Code:
    <script type="text/javascript">
    function toggle( targetId ){
    if (document.getElementById){
    target = document.getElementById( targetId );
    if (target.style.display == "none"){
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
    }
    }
    </script>
    
    <!--Tab Bar-->
    
    <div id="review_tab">
    <p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/review.jpg" alt="Click to Show/Hide Review" /></a></p>
    </div>
    
    <div id="stats_tab">
    <p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/stats.jpg" alt="Click to Show/Hide stats" /></a></p>
    </div>
    
    <div id="gallery_tab">
    <p><a href="#" onClick="toggle ('review'); toggle ('stats'); return false"><img src="img/tabs/gallery.jpg" alt="Click to Show/Hide gallery" /></a></p>
    </div>
    
    <!--End Tab Bar-->
    
    
    <!--Review Tab-->
    <div id="review">
    
    CONTENT OF REVIEW HERE
    
    </div>
    <!--End Review Tab-->
    
    
    
    <!--Stats Tab-->
    <div id="stats" style="display:none;">
    
    CONTENT OF STATS HERE
    
    </div>
    <!--End Stats Tab-->
    
    etc. .
    Thanks

    Neil

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is all JavaScript and CSS, not PHP.

    When a tab is clicked and currently hidden, set the display property of all the other divs to none. You only want a single toggle() function call on the click.

    Edit:

    For anyone else reading this, the thread was originally posted in the PHP forum.
    Last edited by Dan Grossman; Jan 6, 2007 at 14:25.

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still confused. Doing that would eventually get more than 1 content div open at the same time and I want only 1 cont div to be open at any one time!

    I also put it in here as I didn't know if it could be done with php as well?

    I do not want the page to be refreshed between tabs being clicked. Which is why I went with the div hide/show method but as above it is getting messed up.

    Thanks

    Neil

  4. #4
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    I'm still confused. Doing that would eventually get more than 1 content div open at the same time and I want only 1 cont div to be open at any one time!
    Quote Originally Posted by Dan Grossman
    When a tab is clicked and currently hidden, set the display property of all the other divs to none.
    That's the contradiction. Do the above and more than one tab can't be open at one time... you hid them.

    Code:
    if (targetId == 'review' && document.getElementById('review').style.display == 'none') {
      document.getElementById('stats').style.display = 'none';
      document.getElementById('gallery').style.display = 'none';
      document.getElementById('review').style.display = 'block';
    }

  5. #5
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah right,
    Yeh, I understand now but i don't understand the code? Can you walk me through it and tell me what it does.

    Thanks

    Neil

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I ahve tried doing this:

    Code:
    <!--Tab Bar-->
    
    <div id="review_tab">
    <p><a href="#" onClick="if (targetId == 'review' && document.getElementById('review').style.display == 'none') {
      document.getElementById('stats').style.display = 'none';
      document.getElementById('gallery').style.display = 'none';
      document.getElementById('review').style.display = 'block';
    } return false"><img src="img/tabs/review.jpg" alt="Click to Show/Hide Review" /></a></p>
    </div>
    
    <div id="stats_tab">
    <p><a href="#" onClick="if (targetId == 'review' && document.getElementById('review').style.display == 'none') {
      document.getElementById('stats').style.display = 'block';
      document.getElementById('gallery').style.display = 'none';
      document.getElementById('review').style.display = 'none';
    } return false"><img src="img/tabs/stats.jpg" alt="Click to Show/Hide stats" /></a></p>
    </div>
    
    <div id="gallery_tab">
    <p><a href="#" onClick="if (targetId == 'review' && document.getElementById('review').style.display == 'none') {
      document.getElementById('stats').style.display = 'none';
      document.getElementById('gallery').style.display = 'block';
      document.getElementById('review').style.display = 'none';
    } return false"><img src="img/tabs/gallery.jpg" alt="Click to Show/Hide gallery" /></a></p>
    </div>
    
    <!--End Tab Bar-->
    but it doesn't seem to work. I also don't want it jumping to the top each time a tab is clicked?

    Thanks

    Neil

  7. #7
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This isn't the prettiest code, but I'm not a regular in the JavaScript forum at all...

    HTML Code:
    <script type="text/javascript">
    function toggle(target) {
      if (document.getElementById(target).style.display == 'none') {
        show(target);
      } else {
        document.getElementById(target).style.display='none';
      }
    }
    
    function show(target) {
      document.getElementById('review').style.display='none';
      document.getElementById('stats').style.display='none';
      document.getElementById('gallery').style.display='none';
      document.getElementById(target).style.display='block';
    }
    </script>
    
    <!--Tab Bar-->
    
    <div id="review_tab">
    <p><a href="#" onClick="toggle('review'); return false;"><img src="img/tabs/review.jpg" alt="Click to Show/Hide Review" /></a></p>
    </div>
    
    <div id="stats">
    <p><a href="#" onClick="toggle('stats'); return false;"><img src="img/tabs/stats.jpg" alt="Click to Show/Hide stats" /></a></p>
    </div>
    
    <div id="gallery_tab">
    <p><a href="#" onClick="toggle('gallery'); return false;"><img src="img/tabs/gallery.jpg" alt="Click to Show/Hide gallery" /></a></p>
    </div>
    
    <!--End Tab Bar-->
    Although simply linking to a different page for each tab would've allowed anyone to use it, not just those with javascript enabled.

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So is there a way to do it so all people can use it?

  9. #9
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But without page refreshes

    also what is the average percentage of users which have javascript turned off and is there a script which can determine if javascript is on or off so i can provide a different method of showing the info?

  10. #10
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    But without page refreshes
    No, only client-side code (JavaScript) can alter a webpage without a page refresh. Between 1% and 2% of visitors to most sites won't have JavaScript enabled.

  11. #11
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and my webiste won't be recieving a huge percentage of web users anyway so it may be only 1 or 2 people at most

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan has given you the Javascript you need. It just needs a little more to turn it into a progressive enhancement

    Here's a demo for accessible, tabbed panels. Look at the HTML for what I call a tabPanelGroup:
    Code:
    <div id='tpg1' class='tabPanelGroup'>
    
      <div class='tabGroup'>
        <a href='#tpg11' class='tabDefault'>General</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg12' class='tabDefault'>Javascript</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg13' class='tabDefault'>CSS</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg14' class='tabDefault'>HTML</a>
      </div>
      
      <div id='tpg11' class='tabPanel'>
        <h4>General</h4>
        <p>Tab panel groups. Multiple objects can be instantiated on one page.</p>
      </div>
      
      <div id='tpg12' class='tabPanel'>
        <h4>Javascript</h4>
        <p>Cross-browser, downgradeable, and unobtrusive. Disable Javascript and reload this page.</p>
      </div>
      
      <div id='tpg13' class='tabPanel'>
        <h4>CSS</h4>
        <p>In 2 files: tpg_def.css for default styles, and tpg_dyn.css for dynamic overrides when Javascript is enabled.</p>
      </div>
      
      <div id='tpg14' class='tabPanel'>
        <h4>HTML</h4>
        <p>The content is in the HTML - it is not written with Javascript.</p>
      </div>
      
    </div>
    Note first that there is no Js in the html. This html renders and functions just fine without Js because of the 'named anchors' in each tab. Note how the named anchors reference the IDs of the "panels".

    Now how to integrate Dan's code with the above html... brb

  13. #13
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't that code be used on it's own?

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hey,
    Right, I have found a script by Zapatec which seems well written, does exactly what I want and seems easy to use except I cannot get it working. The script is http://www.zapatec.com/website/main/.../tabs/docs.jsp

    Below is what I have so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Tab Test</title>
    
    
    <!-- Javascript modules required for the tabs -->
    <!-- Javascript Zapatec utilities file -->  
    <script type="text/javascript" src="utils/zapatec.js"></script>
    <!-- Javascript file to support tabs -->
    <script type="text/javascript" src="zptabs/src/zptabs.js"> </script>
    
    
    
    <script type="text/javascript">
    
    var objTabs = new Zapatec.Tabs({
      // ID of Top bar to show the Tabs: Game, Photo, Music, Chat
      tabBar: 'tabBar',
      /* 
      ID to get the LABEL contents to create the tabBar tabs
      Also, each DIV in this ID will contain the contents for each tab 
      */
      tabs: 'tabs',
      // Theme to use for the tabs
      theme: 'themes/default.css'
    });
    
    </script>
    
    
    
    </head>
    
    <body>
    
    
    
    <!--Tab Bar-->
    
    <div id="tabBar" style="width: 400px"></div>
    
    <!--End Tab Bar-->
    
    
    <!--Actual Tab Contents-->
    <div id="tabs">
    
    <!--Review Tab-->
    <div id="review">
    
    <label accesskey="r" title="Review"><u>R</u>eview</label>
    Review Tab Area
    
    </div>
    
    
    <div id="stats">
    
    <label accesskey="s" title="Statistics"><u>S</u>tatistics</label>
    Statistics Tab Area
    
    </div>
    
    </div>
    
    </body>
    </html>
    I have got the correct files in the folders as show below:

    themes/default.css
    zptabs/src/zptabs.js
    utils/zapatec.js

    Anyone any idea why it is not working as I have tried so much and it just keeps failing. All i Get is what is shown in the below image:



    Thanks

    Neil

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Now how to integrate Dan's code with the above html...
    There are still a few things that need to be done to this before we can properly call it an unobtrusive enhancement. But it is a good illustration of the basic principles.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Basic Tabbed Panels</title>
    <style type='text/css'>
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      show('tpg11');
      xGetElementsByClassName('tabDefault', document.getElementById('tpg1'), 'a',
        function(a) {
          a.onclick = tabOnClick;
        }
      );
    }
    function tabOnClick()
    {
      show(this.hash.substr(1));
      return false;
    }
    function show(target)
    {
      xGetElementsByClassName('tabPanel', document.getElementById('tpg1'), 'div',
        function(ele) {
          ele.style.display = 'none';
        }
      );
      document.getElementById(target).style.display = 'block';
    }
    // http://cross-browser.com/x/lib/view.php?sym=xgetelementsbyclassname
    function xGetElementsByClassName(c,p,t,f)
    {
      var r = new Array();
      var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
      var e = p.getElementsByTagName(t);
    //  var e = xGetElementsByTagName(t,p); // See xml comments.
      for (var i = 0; i < e.length; ++i) {
        if (re.test(e[i].className)) {
          r[r.length] = e[i];
          if (f) f(e[i]);
        }
      }
      return r;
    }
    </script>
    </head>
    <body>
    
    <div id='tpg1' class='tabPanelGroup'>
    
      <div class='tabGroup'>
        <a href='#tpg11' class='tabDefault'>General</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg12' class='tabDefault'>Javascript</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg13' class='tabDefault'>CSS</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg14' class='tabDefault'>HTML</a>
      </div>
      
      <div id='tpg11' class='tabPanel'>
        <h4>General</h4>
        <p>Tab panel groups. Multiple objects can be instantiated on one page.</p>
      </div>
      
      <div id='tpg12' class='tabPanel'>
        <h4>Javascript</h4>
        <p>Cross-browser, downgradeable, and unobtrusive. Disable Javascript and reload this page.</p>
      </div>
      
      <div id='tpg13' class='tabPanel'>
        <h4>CSS</h4>
        <p>In 2 files: tpg_def.css for default styles, and tpg_dyn.css for dynamic overrides when Javascript is enabled.</p>
      </div>
      
      <div id='tpg14' class='tabPanel'>
        <h4>HTML</h4>
        <p>The content is in the HTML - it is not written with Javascript.</p>
      </div>
      
    </div>
    
    </body>
    </html>
    Regarding the Zapatec code: it doesn't work with Js disabled. Also, did you read the license?

  16. #16
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused,
    I DO NOT have JS disabled and just want to know why it does not work and what is the code above going to do, what does it do, where do i put it. Step by step instructions would be more helpful. I am only a beginner at this. and what about the license?

    Thanks

    Neil

  17. #17
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    and what about the license?
    Unless you paid for a commercial license from that site, you have to link to them on every page of your site.

  18. #18
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    I DO NOT have JS disabled...
    Disabling Js and testing a page should be part of your normal development/testing.

    Quote Originally Posted by rctneil View Post
    ... and just want to know why it does not work...
    If you purchase the product you will get support from the author.

    Quote Originally Posted by rctneil View Post
    ... and what is the code above going to do, what does it do, where do i put it. Step by step instructions would be more helpful.
    Copy my code-post, paste it into a text file and save it as a file with a '.html' extension - then open it in a browser. Try it with Js enabled and disabled. I've left an empty STYLE element - start adding your own styles to make it look the way you want.

    Quote Originally Posted by rctneil View Post
    ... I am only a beginner at this.
    There's nothing wrong with that If you want to learn you're at the right place.

    Btw... did you look at my demo?

  19. #19
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did look at the demo but how do i make it match the style of those?

  20. #20
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Right click > View source, or just click the convenient links the page provides to the stylesheet files.

  21. #21
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if javascript is turned off then all the divisions are just listed one below another?

  22. #22
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    So if javascript is turned off then all the divisions are just listed one below another?
    Yes - and the 'tabs' become regular 'named anchors' which, when clicked, scroll the page down to the appropriate div.

  23. #23
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'll give it a shot. Is there a way to put the code that makes it all work in an incude and call it in using php on every page and then do something to make it link in with any tab things that are on that page?

  24. #24
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed the Javascript used by the 'basic' demo so that it automatically detects and configures any tabPanelGroups on the page. Here is tpg_basic.html. The Js is now in a separate file so it can be easily included into any page: tpg_basic.js.

    It is instructive to note how this 'basic demo' has developed. I started with nothing but the HTML and made it functional without Js. I then added Js which made use of the IDs. I then 'abstracted' the Js so it would work with any number of tabPanelGroups, without assumed IDs. I then made the Js automatically detect and configure any tabPanelGroups on the page.

    Now is a good time to decide if you want to continue building your application from the 'basic demo', or if you want to start with the xTabPanelGroup demo.

    Please note that I'm not just trying to get you to use my library and my Js. You are welcome to use anyone's and I would still try to help you (altho I prefer not to provide free support for other people's commercial products).

  25. #25
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whats the differnce between the XTabPanelGroup and the 'basic demo'?


    Thanks

    Neil


Bookmarks

Posting Permissions

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