#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    3
    Rep Power
    0

    Question Tab Javascript not working - please help


    I borrowed some code and am trying to get this working with Javascript. I was hoping someone with more experience could see the issue. The div section is not hiding and the tab link is not updating color. I'm sure its something simple, I'm very new to Javascript. here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Alphabetic Listing</title>
    <script language="javascript">

    function domTab(i){
    // Variables for customisation:
    var numberOfTabs;
    var colourOfInactiveTab;
    var colourOfActiveTab;
    var colourOfInactiveLink;
    var colourOfActiveLink;
    var d;
    var f;
    // end variables
    colourOfInactiveTab = "#999966";
    colourOfActiveTab = "#CCCC99"
    colourOfInactiveLink = "#333333";
    colourOfActiveLink = "#FFFFCC";
    numberofTabs = 3;
    d = document;
    if (d.getElementById('contentblock'+i)){
    for (f=1;f<numberOfTabs+1;f++){
    if (f != i) {
    d.getElementByID('contentblock'+f).style.display='none';
    d.getElementById('contentblock'+f).style.visibility='hidden';
    d.getElementById('link'+f).style.background=colourOfInactiveTab;
    d.getElementById('link'+f).style.color=colourOfInactiveLink;
    }
    }
    d.getElementById('contentblock'+i).style.display='block';
    d.getElementById('contentblock'+i).style.visibility='visible';
    d.getElementById('link'+i).style.background=colourOfActiveTab;
    d.getElementById('link'+i).style.color=colourOfActiveLink;
    }
    }

    </script>
    <link rel="StyleSheet" href="basictabs.css" type="text/css" />
    <style type="text/css">@import "domtabs.css";</style>
    </head>
    <body onload="domTab(1)">
    <a name="top"></a><!-- necessary to send Netscape users back to the top -->
    <!--
    These are the tabs. Make sure that each of them has the correct id,
    target and corresponding number in the domTab() call.
    -->
    <a href="#target1" onclick="domTab(1)" id="link1" class="tablink">A</a>
    <a href="#target2" onclick="domTab(2)" id="link2" class="tablink">B</a>
    <a href="#target3" onclick="domTab(3)" id="link3" class="tablink">C</a>
    <!--
    example:
    <a href="#target4" onclick="domTab(4)" id="link4" class="tablink">Tab 4</a>
    -->

    <!--
    These are the different content blocks of the tabs, each one needs to
    have the id (starting with "contentblock" and followed by its number) and the
    class "tab" to set the look and feel. Each needs a targeted link to
    allow netscape users to jump there, and a link back to top with the
    class "backtotop". This link will not be displayed in other browsers
    than NS4.x
    -->
    <div id="contentblock1" style="visibility: visible; border: 1px display:inline none #000000"><a name="#target1"></a>
    <table width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td>Line A</td></tr>
    <tr><td><p class="backtotop" ><a href="#top">Back to top</a></p></td></tr></table></div>

    <div id="contentblock2" style="visibility: hidden; border: 1px display:inline none #000000"><a name="#target2"></a>
    <table width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td>Line B</td></tr>
    <tr><td><p class="backtotop"><a href="#top">Back to top</a></p></td></tr></table></div>

    <div id="contentblock3" style="visibility: hidden; border: 1px display:inline none #000000"><a name="#target3"></a>
    <table width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td>Line C</td></tr>
    <tr><td><p class="backtotop"><a href="#top">Back to top</a></p></td></tr></table></div>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    3
    Rep Power
    0

    Additional Info


    In addition, here is the domtabs.css

    /*
    These settings only apply to browsers capable of @import (almost anything but
    Netscape 4.x
    */
    .tab {
    width:auto;
    border:none;
    /*
    It might be nicer to add a display:none here, but that'll rule
    out Opera users
    */
    }
    .tablink {
    display:inline; /*mandatory*/
    margin-right:.1em;
    padding-left:.2em;
    padding-right:.2em;
    text-decoration:none;
    font-weight:bold;
    }
    .backtotop {
    display:none; /*mandatory*/
    }


    and basictabs.css:

    /*
    These styles apply to browsers that are not able to support CSS 2
    IE Netscape 4.x and newer ones
    */
    body{
    font-family:verdana,arial,sans serif;
    font-size:.8em;
    margin-left:1em;
    margin-right:1em;
    margin-top:2em;
    }
    a {color:#333;}

    .tablink{
    display:block;
    color:#ccc;
    font-weight:bold;
    }
    pre{
    font-size:1.2em;
    }
    .tab {
    font-family:verdana,arial,sans serif;
    background:#cccc99;
    padding:10px;
    width:100%;
    color:#333;
    /* blind border hack to display background colour in Netscape 4.x */
    border-width:1px;
    border-type:solid;
    border-color:#003366;
    }
    .backtotop {
    text-align:right;
    }
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    JavaScript is:

    1) case-sensitive
    2) unforgiving

    colourOfActiveLink = "#FFFFCC";
    numberofTabs = 3;
    d = document;
    if (d.getElementById('contentblock'+i)){
    for (f=1;f<numberOfTabs+1;f++){
    if (f != i) {
    d.getElementByID('contentblock'+f).style.display='none';
    d.getElementById('contentblock'+f).style.visibility='hidden';

    This looks odd, too:


    <div id="contentblock1" style="visibility: visible; border: 1px display:inline none #000000"><a
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    3
    Rep Power
    0

    That worked!


    When I made the case change to number of tabs, it worked. Thank you! Thank you! I didn't realize the case sensitivity (yes, I'm a newbie)

IMN logo majestic logo threadwatch logo seochat tools logo