www.webdeveloper.com
Page 3 of 4 FirstFirst 1234 LastLast
Results 31 to 45 of 46

Thread: Finally, Accessible DHTML Tabs

  1. #31
    Join Date
    Aug 2004
    Posts
    244

  2. #32
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    If anyone has a live example of two tabbed boxes on the same page (or two separate pages, but code for both boxes on same css), I would really appreciate it.

    Thanks!

  3. #33
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  4. #34
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    Oh no problem at all! Thank you--I appreciate any help at all. I know I must be doing something weird and making it more complicated than it needs to be.

  5. #35
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    I see you changed the Ids on this page: http://myweb.twu.edu/~bklug/library/...le/tab_tab.htm

    Now all you need to do is add some CSS to tab_styles.css:
    Code:
    #otherTabs .tabbedNavOn li {
      /* Your width here */
    }
    And for the tabs on http://myweb.twu.edu/~bklug/library/...e/home_tab.htm

    Code:
    #homeTabs .tabbedNavOn li {
      /* Your width here */
    }
    I was looking at those pages and it looks like you've got it sorted out.

  6. #36
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    Hi, thanks so much for the response. I really appreciate it. I did make that css change and it looks like that is what's making the tab names stretch across the page as opposed to them lining up horizontally. Also, I set each one to a different width, but they are both showing as the same width (both 800px). These are the changes I made to my css file:
    http://myweb.twu.edu/~bklug/library/css/all2_tab.css

    (line 698)
    #otherTabs .tabbedNavOn li {
    width: 800px;
    float: left;
    margin-right: 1px;
    }
    (line 418)
    #homeTabs .tabbedNavOn li{
    width: 400px;
    float: left;
    margin-right: 1px;
    }

    Sorry I keep bothering you with questions! I really do appreciate it. We have to get all of our css on one file for our site, and I need to determine if I have to find another tabbed box to use on our main page.

  7. #37
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    The tabs are too wide. Since they are floated, they will stay on one line as long as there is enough width, then it will wrap to a second line. It's not like a table at all.

    To shore up the styles a tad:
    Code:
    #otherTabs .tabbedNavOn li {
      width: 800px;
    }
    Code:
    #homeTabs .tabbedNavOn li {
      width: 400px;
    }
    You don't need to redeclare the float and margin properties, as they have already been declared. The widths you set in those declarations apply to all the tabs in that tab box. Now to get each tab it's own width:
    Code:
    #otherTabs .tabbedNavOn li a#tab_Id {
      /* Your Width here */
    }
    
    #homeTabs .tabbedNavOn li a#another_tab_Id {
      /* Your Width here */
    }
    For example:
    Code:
    #homeTabs .tabbedNavOn li a#tab1 {
      width: 100px;
    }
    
    #homeTabs .tabbedNavOn li a#tab2 {
      width: 130px;
    }
    On the home page, it should make the first tab 100 pixels wide and the second tab 130 pixels wide. All remaining tabs in that tab box would be 400 pixels wide (as denoted from the #homeTags .tabbedNavOn li declaration).

    Does that help out?

  8. #38
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    Thanks, I think that will help. One more question...why are both my tab content areas showing as 800px on both pages although I have the home set to 400px? I may have done a lousy job explaning--I really don't want to change the tab widths themselves, I want to change the size of the box under the tabs. I have the background color set to #eeeeee and you might not be able to see it but the box on the home_tab page is going way over to the right where the news box is. This is what I have set for

    home tabs
    .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 400px; /* Width required by Safari and IE5-Mac */

    }
    /* The DIV tag that encapsulates one entire tab structure. */
    .tabWrapper {
    position: relative;
    width:400px;
    margin-left:10px;
    z-index: 1;
    }




    other tabs
    .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 800px; /* Width required by Safari and IE5-Mac */
    }
    /* The DIV tag that encapsulates one entire tab structure. */
    .tabWrapper {
    position: relative;
    width: 800px;
    z-index: 1;
    }


    Thanks again. Sorry again about all the questions....

  9. #39
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Ah, I see. I thought you wanted to change the widths of the clickable tabs. You want to change the width of the tabWrapper then. You could change the widths of the tab boxes (the boxes below the tabs), but you can make it even easier and change the tabWrapper itself.
    Code:
    /*
    * This File: TAB_styles.css
    * Contains all CSS declarations to visually format Accessible Tabs. Contains
    * CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
    * imported via the @import method.
    *
    * Version - Accessible Tabs: 1.0
    * By Greg Burghardt
    * greg_burghardt [at] yahoo.com
    */
    
    
    /* Custom widths for tabWrappers */
    #homeTabs {
     width: 400px
    }
    
    #otherTabs {
     width: 800px;
    }
    
    /* The UL element containing the tabs when JavaScript is enabled. */
    .tabbedNavOn li {
     float: left;
     margin-right: 1px;
    }
    
    .tabbedNavOn { 
     list-style-type: none;
     margin: 0;
     padding: 0;
    }
    
    /*************** Common styles for both .tabOff and .tabOn *****************/
    .tabbedNavOn a {
     display: block;
    }
    
    .tabbedNavOn a:link,
    .tabbedNavOn a:visited,
    .tabbedNavOn a:active,
    .tabbedNavOn a:hover,
    .tabbedNavOn a:focus {
     text-decoration: none;
    }
    
    .tabbedNavOn a span {
     display: block;
    }
    
    .tabbedNavOn a span span {
     padding: .33em .75em;
    }
    /*************** End common styles for .tabOff and .tabOn ******************/
    
    /* This class is a tab when it is not active. */
    .tabOff {
     cursor: pointer;
     cursor: hand;
     display: block;
    }
    
    /* Non active Tab text color when in the visited and non visited states. */
    .tabOff:link,
    .tabOff:visited {
     color: #ccccccc;
    }
    
    /* Non active tab background color & graphic when in the visited or non
    * visited states. */
    .tabOff:link span,
    .tabOff:visited span {
     background: #eeeeee url no-repeat scroll 0 0;
    }
    
    /* Non active tab's right background graphic when the tab is in a visited or
    * non visited state. */
    .tabOff:link span span,
    .tabOff:visited span span {
     background: ##eeeeee transparent url no-repeat scroll 100% 0;
    }
    
    /* Non active tab's text color in the active, focus, an hover states. */
    .tabOff:active,
    .tabOff:focus,
    .tabOff:hover {
     color: #660000;
    
    
    }
    
    /* Non active tab's background color and left background graphic when in the
    * active, focus and hover states. */
    .tabOff:active span,
    .tabOff:focus span,
    .tabOff:hover span {
     background: #000000 url no-repeat scroll 0 -500px;
    }
    
    /* Non active tab's background graphic when in the active, focus and hover
    * states. */
    .tabOff:active span span,
    .tabOff:focus span span,
    .tabOff:hover span span {
     background: transparent urlno-repeat scroll 100% -500px;
    }
    
    /* This class is a tab that is switched "on" */
    .tabOn {
     cursor: default;
     display: block;
    }
    
    /* Active tab text color when in the visited and non visited states. */
    .tabOn:link,
    .tabOn:visited,
    .tabOn:active,
    .tabOn:hover {
     color:#660000;
      font-weight:bolder;
      background-color:#eeeeee;
    }
    
    /* Active tab background color & graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span,
    .tabOn:visited span,
    .tabOn:active span,
    .tabOn:hover span {
     background: #eeeeee url no-repeat scroll 0 -1000px;
    
    }
    
    /* Active tab's right background graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span span,
    .tabOn:visited span span,
    .tabOn:active span span,
    .tabOn:hover span span {
     background: transparent url no-repeat scroll 100% -1000px;
    }
    
    /* The active tab when it has the system focus. */
    .tabOn:focus {
     color: #660000;
     background color: #eeeeee;
    }
    
    /* The active tab's BG color & graphic when it has the system focus. */
    .tabOn:focus span {
     background: #660000(images/Tab_Left.gif) no-repeat scroll 0 -500px;
    }
    
    /* The active Tab's right BG graphic when it has the system focus. */
    .tabOn:focus span span {
     background: transparent url(images/Tab_Right.gif) no-repeat scroll 100% -500px;
    }
    
    
    /* Tab boxes when JavaScript is disabled. */
     .tabBox {
     font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
     font-size: 1.25em;
    }
    
    .tabBox .tabBoxNav {
     display: none;
    }
    
    /* Hide the tab boxes when they are turned off. */
    .tabBoxOff {
     display: none;
    }
    
    /* The tab box is switched "on" */
    .tabBoxOn {
     height: 210px;
     background-color: #eeeeee;
     margin-top: -1px;
     zoom: 1;
    }
    
    /* Padding and borders around the tab content. */
    .tabBoxOn .tabBoxGutter {
     border: 1px solid #eeeeee;
     padding: 0 12px;
    }
    
    /* The tab's bottom text links for Next and Previous */
    .tabBoxOn .tabBoxNav {
     background-color: #eeeeee;
     display: block;
     margin: 0;
     padding: .33em 5px 0 5px;
    }
    
    /* The tab's bottom text links when the link is visited and non visited. */
    .tabBoxOn .tabBoxNav a:link,
    .tabBoxOn .tabBoxNav a:visited {
     color: #000000;
     text-decoration: none;
    }
    
    /* The tab's bottom text links when the link is active, hovered on, or has
    * the system focus. */
    .tabBoxOn .tabBoxNav a:active,
    .tabBoxOn .tabBoxNav a:hover,
    .tabBoxOn .tabBoxNav a:focus {
     color: #660000;
     text-decoration: underline;
    }
    
    /* Gap below the tab's bottom links, and the bottom of the tab box. */
    .tabBoxOn .tabBoxNav .tabSpacer {
     height: .33em;
    }
    
    .tabBoxOn .tabBoxNavLeft {
     float: left;
     padding-right: 5px;
    }
    
    .tabBoxOn .tabBoxNavRight {
     float: right;
     padding-left: 5px;
    }
    
    /* When JavaScript is disabled, hide the link to jump back to the tabs. */
    .tabOptionsOff {
     display: none;
    }
    
    /* The link to jump back to the tabs when JavaScript is enabled. */
    .tabOptionsOn {
     margin: 0;
    }
    
    .tabOptionsOn a {
     margin: -1.5em 0 0 0;
     position: absolute;
     text-align: center;
     width: 100%;
    }
    
    .tabOptionsOn a:link,
    .tabOptionsOn a:visited {
     color: #fff;
     z-index: -1;
    }
    
    .tabOptionsOn a:active,
    .tabOptionsOn a:focus,
    .tabOptionsOn a:hover {
     color: #eeeeee;
     z-index: 1;
    }
    That will change the width of the tab boxes, and keeps the tabs from extending too far right of the tab boxes.

  10. #40
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    thank you, thank you, thank you!!!!!!!!!! i tried that css, and it was bunching the box over to the right, so i added the following and that seemed to do the trick!!!! Thanks so much for your help--you rule (as do your tabs).

    /* Custom widths for tabWrappers */
    #homeTabs{
    width: 400px
    }

    #homeTabs .tabSpacerOn {

    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 400px; /* Width required by Safari and IE5-Mac */
    }


    #otherTabs{
    width: 800px;
    }


    #otherTabs .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 800px; /* Width required by Safari and IE5-Mac */

    }

  11. #41
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  12. #42
    Join Date
    Nov 2007
    Posts
    3

    Need some help!

    toicontien ,

    I really like your tabs. I am, however, having a small problem with the next and previous links working on my website. I am building a store using ZenCart. I want to use your tabs in the product descriptions. I adapted your code and renamed the boxes to makes sense with what I am doing. Everything looked good when I check it in a page by itself and It worked great. All the tabs worked and the next and previous links at the bottom worked.

    I took the code and pasted it in the html box that ZenCart has for the product description. When I go to my website and view that product, the tabs all work correctly but the next and previous link do not behave correctly. If you click next or previous, it will go to the proper tab but within a second it will reload the sites home page and take you out of the product section.

    How do I fix this?
    Last edited by ScootaMan; 11-14-2007 at 10:26 AM.

  13. #43
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  14. #44
    Join Date
    Nov 2007
    Posts
    3
    Quote Originally Posted by toicontien
    Do you have a link to the page, or can you post the HTML you are using?
    The that page is http://sftscooters.com/index.php?mai...&products_id=2


    the code is:

    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Product Information</title>
    <style type="text/css" media="screen">
    <!--
    @import "TAB_styles.css";
    .style1 {font-size: large}
    -->
    </style>
    <script type="text/javascript" src="TAB_Function_Lib.js"></script>
    </head>
    <body onunload="TAB_GLOBAL_UNINITIALIZE(Array(Example));">
    <p>The MPS 150T-2 is a large and fast touring scooter. This scooter will reach speeds of up to 65 mph (dependent on driver weight and road conditions). One ride and I'm sure you will fall in love with this beatuful touring scooter.</p>
    <pre style="font-size: 1em; font-family: 'courier new', courier, monospace;" id="TAB_DEBUG_BLOCK"></pre>
    <h1 class="style1">Product Information </h1>
    <div class="tabWrapper" id="example">
    <ul class="tabbedNavOff" id="example_tabs">
    <li><a class="" id="tabspecs" href="#specs" onclick="return Example.switchTab(this.id,false)"><span><span>Specifications</span></span></a></li>
    <li><a class="" id="tabmoreinfo" href="#moreinfo" onclick="return Example.switchTab(this.id,false)"><span><span>More Info</span></span></a></li>
    <li><a class="" id="tabshipping" href="#shipping" onclick="return Example.switchTab(this.id,false)"><span><span>Shipping Info</span></span></a></li>
    <li><a class="" id="tabwarranty" href="#warranty" onclick="return Example.switchTab(this.id,false)"><span><span>Warranty </span></span></a></li>
    </ul>
    <div class="tabSpacerOff" id="example_spacer">&nbsp;</div>

    <div class="tabBox" id="specs">
    <div class="tabBoxGutter">
    <h2>MPS 150T-2 Touring Scooter</h2>
    <ul>
    <li>150cc engine, 4 stroke,</li>
    <li>Dimension(Inches): L81 X W33 X H47</li>
    <li>Wheelbase(Inches):57</li>
    <li>Ignition: CDI</li>
    <li>Ground Clearance(Inches):6</li>
    <li>Weight(Lbs):286</li>
    <li>The Max Load(Lbs):330 </li>
    <li>Wheel Size: Front/Rear:110/90-12//110/90-10</li>
    <li>Brake(Front/Rear)isk(Front).Drum(Rear)</li>
    <li>Braking Operate System: Fr/Rr:Manual/Manual Or Pedal</li>
    <li>Starter: Electronic</li>
    <li>Trunk included</li>
    </ul>
    <p>This is the scooter that I personally own and love. </p>
    </div>
    <p class="tabBoxNav">
    <a href="#moreinfo" class="tabBoxNavRight" onclick="return Example.switchTab('tabmoreinfo', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end specs -->

    <div class="tabBox" id="moreinfo">
    <div class="tabBoxGutter">
    <h2>More Information</h2>
    <p>Certificate of Origin</p>

    <p>Certificates of Origin are not shipped with the units. This is to protect the buyer from theft. The person who holds the certificate of origen can legally register as the owner of the moped. We mail the Certificate of Origin after your moped is delivered and you have emailed us the VIN number and Make and Model.</p>

    <p>Please email us the following information once you moped arrives:</p>

    <ul>
    <li>VIN #
    <li>MAKE and MODEL
    <li>YOUR NAME and ADDRESS
    </ul>
    <p>We will mail you the Certificate of Origin after we recieve this information.</p>
    </div>
    <p class="tabBoxNav">
    <a href="#specs" class="tabBoxNavLeft" onclick="return Example.switchTab('tabspecs', true);">&lt;&lt; Previous</a>
    <a href="#shipping" class="tabBoxNavRight" onclick="return Example.switchTab('tabshipping', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end moreinfo -->

    <div class="tabBox" id="shipping">
    <div class="tabBoxGutter">
    <h2>Shipping</h2>
    <p>We generally ship within three days and once your item is shipped we will email you a tracking number. Shipping for all ATVs and mopeds will be through an LTL freight company. Mopeds and ATVs are too large and heavy to ship by FedEx or UPS. The freight copy will call on the day of delivery to make final delivery arrangements with you. These scooters are very heavy and we recommend that you purchase the lift gate option for residential deliveries.
    </p>

    </div>
    <p class="tabBoxNav">
    <a href="#moreinfo" class="tabBoxNavLeft" onclick="return Example.switchTab('tabmoreinfo', true);">&lt;&lt; Previous</a>
    <a href="#warranty" class="tabBoxNavRight" onclick="return Example.switchTab('tabwarranty', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end shipping -->

    <div class="tabBox" id="warranty">
    <div class="tabBoxGutter">
    <h2>Warranty</h2>
    <p>Warranty is covered by NTS Inc. NTS warrants that all products are free from manufacture defects, and agrees to repair or replace any part of a product that proves to be defective by any reason of improper workmanship or materials, without charge of any kind to the customer. </p>
    <p>This warranty only coveres defective parts. It does not cover misuse or damage caused by the user.</p>
    <p>Defective parts must be sent to us to insure you recieve the right replacement part.</p>
    </div>
    <p class="tabBoxNav">
    <a href="#shipping" class="tabBoxNavLeft" onclick="return Example.switchTab('tabshipping', true);">&lt;&lt; Previous</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end whoever -->

    <p class="tabOptionsOff" id="example_options"><a href="#example">Tab options</a></p>
    <script type="text/javascript">
    //<![CDATA[

    // Declare a new instance of the TAB class
    var Example = new TAB();

    // Set IDs needed to create tab structure.
    Example.name = "example";
    Example.tabSpacerID = "example_spacer";
    Example.tabOptionsID = "example_options";
    Example.tabRootID = "example_tabs";

    // IDs of the tabs themselves
    Example.tabIDs[0] = "tabspecs";
    Example.tabIDs[1] = "tabmoreinfo";
    Example.tabIDs[2] = "tabshipping";
    Example.tabIDs[3] = "tabwarranty";

    // IDs of the tab boxes
    Example.boxIDs[0] = "specs";
    Example.boxIDs[1] = "moreinfo";
    Example.boxIDs[2] = "shipping";
    Example.boxIDs[3] = "warranty";

    // Initialize the tabs
    Example.initialize();

    //Example.initializeWithIDs("example","example_tabs","example_spacer","example_options");
    // ]]>
    </script>
    </div>
    <!-- end example -->
    </body>
    </html>


    Thanks!

  15. #45
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles