Results 1 to 4 of 4

Thread: Tab Content Script Help

  1. #1
    Join Date
    Mar 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Tab Content Script Help

    1) Script Title: Tab Content Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem: I am fiddling with this script for quite some time now but unable to make it work. Please help me.
    I am attaching the sample page I used to test. I havent changed anything in th CSS or Javascript. When the page loads for the first time content of first tab appears. When I click on any other tabs nothing appears; also i f I click back on first one no content appears!
    Hope you wizards can tell me my mistake. Thanks a lot in advance.
    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Testt</title>
    <link href="tabcontent.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="tabcontent.js">
    /***********************************************
    * Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    </head>
    <body>
    <div>
    <ul id="maintab" class="shadetabs">
    <li class="selected"><a href="#" rel="tcontent1">Over</a></li>
    <li><a href="#" rel="tcontent2">Specs</a></li>
    <li><a href=""#" rel="tcontent3">Loca</a></li>
    </ul>
    </div>
    <div class="tabcontentstyle">
    <div id="tcontent1" class="tabcontent">
     History reveal that civilizations have planted their root beside rivers. 
    </div>
    <div id="tcontent2" class="tabcontent">
    <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three Four Five</li>
    </ul>
    </div>
    <div id="tcontent3" class="tabcontent">
     <img src="test.gif">
    </div>
    </div>
    <p>Paragraph One.</p>
    
    <script type="text/javascript">
    <!--
    initializetabcontent("maintab")
    -->
    </script>
    
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Try this:

    HTML 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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Testt</title>
    <link href="tabcontent.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="tabcontent.js">
    /***********************************************
    * Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    </head>
    <body>
    <ul id="maintab" class="shadetabs">
    <li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
    <li><a href="#" rel="tcontent2">Tab 2</a></li>
    <li><a href="#" rel="tcontent3">Tab 3</a></li>
    <li><a href="#" rel="tcontent4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    
    <div class="tabcontentstyle">
    
    <div id="tcontent1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    <p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
    </div>
    
    <div id="tcontent2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    </div>
    
    <div id="tcontent3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>
    
    <div id="tcontent4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>
    
    </div>
    
    <script type="text/javascript">
    //Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
    initializetabcontent("maintab")
    </script>
    </body>
    </html>
    Direct from the Demo Page.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I've tested your code in my PC and in both browsers (IE 7 & Firefox) it works as it supposed. In other words whenever I click the tabs it shows the content of the corresponding tab except the "loca" tab which has a reference to an image test3.gif which I don't have in my PC.

    If you have a link to your page plz provide that.

  4. #4
    Join Date
    Mar 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks a million Codeexploiter.
    It worked.
    But it beats me what the difference was between my bit of code and the new one you provided. My env is Win2k pc with Firefox 1.7, Opera 7.54..This is not hosted ..i am testing on my (local) pc..sorry, I cannot provide the url.
    Anyway thanks a lot for your quick help.

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
  •