SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot sdavis2702's Avatar
    Join Date
    Sep 2007
    Location
    Austin, TX
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Duplicate Scripts on One Page Problem

    Hello, folks. I was wondering if someone could help me out. Research, trail and error, and just plain on experimenting didn't get me very far.

    I am trying to create a site that has a page displaying past work of a company. For each project they complete, there is the "client objective," "agency concept,' and the "results." I have those three categories displayed in one tabbed container to save space. It works just fine! However, when I go to add the next project completed, using the same script (and as many variations as my mind could conceive), I either have multiple failures or just one failure.

    What must I change on additional Scripts/HTML in order to allow this script to run multiple times on one page?

    HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>  
        <title>Tabbed Structure - Regular</title>  
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
    
    </head>  
      
    <body>  
    
    <div id="tabbed_box_1" class="tabbed_box"> 
        <h4>Browse Site <small>Select a Tab</small></h4> 
        <div class="tabbed_area">  
          
    <script src="functions.js" type="text/javascript"></script>   
    <ul class="tabs">  
        <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">FORUMS</a></li>  
        <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">ARTICLES</a></li>  
        <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">MONEY</a></li>  
    </ul>     
              
            <div id="content_1" class="content">Content for Tab 1</div>  
            <div id="content_2" class="content">Content for Tab 2</div>  
            <div id="content_3" class="content">Content for Tab 3</div>       
        </div>  
      
    </div>
    
    </body>  
    </html>
    CSS:
    Code CSS:
    body {  
        background-image:url(images/background.jpg);  
        background-repeat:no-repeat;  
        background-position:top center;  
        background-color:#000;  
        margin:40px;  
    }
     
     
     
    #tabbed_box_1 {  
        margin: 0px auto 0px auto;  
        width:690px;  
    } 
     
     
    .tabbed_box h4 {  
        font-family:Arial, Helvetica, sans-serif;  
        font-size:23px;  
        color:#4b9d00;  
        letter-spacing:-1px;  
        margin-bottom:10px;  
    }  
     
     
    .tabbed_box h4 small {  
        color:#e3e9ec;  
        font-weight:normal;  
        font-size:9px;  
        font-family:Verdana, Arial, Helvetica, sans-serif;  
        text-transform:uppercase;  
        position:relative;  
        top:-4px;  
        left:6px;  
        letter-spacing:0px;  
    }
     
     
    .tabbed_area {  
        border:1px solid #4b9d00;  
        background-color:#0a1262;  
        padding:8px;      
    } 
     
     
    ul.tabs {  
        margin:0px; padding:0px; 
        margin:0px; padding:0px;  
        margin-top:5px;  
        margin-bottom:6px; 
    }  
    ul.tabs li {  
        list-style:none;  
        display:inline;
    }
     
     
    ul.tabs li a {  
        background-color:#cccccc; 
        background-image:url(images/tab_off.jpg);  
        background-repeat:repeat-x;    
        background-position:bottombottom;  
        color:#ffffff;  
        padding:8px 20px 8px 20px;  
        text-decoration:none;  
        font-size:13px;  
        font-family:Arial, Helvetica, sans-serif;  
        font-weight:bold;  
        text-transform:none;  
        border:1px solid #4b9d00;  
        border-bottom: 0px solid #ffffff; 
    }  
    ul.tabs li a:hover {  
        background-color:#f6f6f6;  
        border-color:#4b9d00;  
    }  
    ul.tabs li a.active {  
        background-color:#ffffff;  
        background-image:url(images/tab_on.jpg);  
        background-repeat:repeat-x;  
        background-position:top;   
        color:#0a1262;  
        border:1px solid #4b9d00;   
        border-bottom: 0px solid #ffffff;  
    }
     
     
    .content {  
        background-color:#d0d0d0;  
        background-image:url(images/content_bottom.jpg);  
        background-repeat:repeat-x;    
        background-position:bottombottom;   
        padding:10px;  
        border:1px solid #4b9d00;     
    }  
    #content_2, #content_3 { display:none; } 
     
     
    .content ul {  
        margin:0px;  
        padding:0px 20px 0px 20px;  
    }  
    .content ul li {  
        list-style:none;  
        border-bottom:1px solid #d6dde0;  
        padding-top:15px;  
        padding-bottom:15px;  
        font-size:13px;  
    }  
    .content ul li a {  
        text-decoration:none;  
        color:#3e4346;  
    }  
    .content ul li a small {  
        color:#8b959c;  
        font-size:9px;  
        text-transform:none;  
        font-family: Arial, Helvetica, sans-serif;  
        position:relative;  
        left:4px;  
        top:0px;  
    }
     
     
    .content ul li:last-child {  
        border-bottom:none;  
    }

    Javascript:
    Code JavaScript:
    function tabSwitch(new_tab, new_content) {  
     
        document.getElementById('content_1').style.display = 'none';  
        document.getElementById('content_2').style.display = 'none';  
        document.getElementById('content_3').style.display = 'none';          
        document.getElementById(new_content).style.display = 'block';     
     
     
        document.getElementById('tab_1').className = '';  
        document.getElementById('tab_2').className = '';  
        document.getElementById('tab_3').className = '';         
        document.getElementById(new_tab).className = 'active';        
     
    }
     
     
    function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
     
        for (var i=1; i < number+1; i++) {  
          document.getElementById(content_prefix+i).style.display = 'none';  
          document.getElementById(tab_prefix+i).className = '';  
        }  
        document.getElementById(content_prefix+active).style.display = 'block';  
        document.getElementById(tab_prefix+active).className = 'active';      
     
    }

    Thanks in advance, folks! I really tried to figure it out and I just don't know Javascript well enough.
    I build WordPress with the Volatyl Framework.

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when I go to add the next project completed
    Could you clarify what you mean by this?

    Do you mean you have multiple occurrences of

    Code HTML4Strict:
    <div id="tabbed_box_1" class="tabbed_box"> 
        <h4>Browse Site <small>Select a Tab</small></h4> 
        <div class="tabbed_area">  
     
    <script src="functions.js" type="text/javascript"></script>   
    <ul class="tabs">  
        <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">FORUMS</a></li>  
        <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">ARTICLES</a></li>  
        <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">MONEY</a></li>  
    </ul>     
     
            <div id="content_1" class="content">Content for Tab 1</div>  
            <div id="content_2" class="content">Content for Tab 2</div>  
            <div id="content_3" class="content">Content for Tab 3</div>       
        </div>  
     
    </div>

    on each page?

  3. #3
    SitePoint Zealot sdavis2702's Avatar
    Join Date
    Sep 2007
    Location
    Austin, TX
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the delayed response!!!!

    Yes, that's exactly what I mean. Check out this page...
    Harthill Marketing Services - Portfolio

    I'm trying to get three boxes like the first one... with the tabbed browsing.

    Any help?
    I build WordPress with the Volatyl Framework.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is make the ids unique in each case. For example add _n where n is a group number so you might have

    Code JavaScript:
    <div id="tabbed_box_1" class="tabbed_box">
        <h4>Browse Site <small>Select a Tab</small></h4>
        <div class="tabbed_area">
     
    <ul class="tabs">
        <li><a href="javascript:tabSwitch_2(1, 3, 'tab_1_', 'content_1_');" id="tab_1_1" class="active">FORUMS</a></li>
        <li><a href="javascript:tabSwitch_2(2, 3, 'tab_1_', 'content_1_');" id="tab_1_2">ARTICLES</a></li>
        <li><a href="javascript:tabSwitch_2(3, 3, 'tab_1_', 'content_1_');" id="tab_1_3">MONEY</a></li>
    </ul>
     
            <div id="content_1_1" class="content">Content for Tab 1</div>
            <div id="content_1_2" class="content">Content for Tab 2</div>
            <div id="content_1_3" class="content">Content for Tab 3</div>
        </div>
     
    </div>
     
    <div id="tabbed_box_2" class="tabbed_box">
        <h4>Browse Site <small>Select a Tab</small></h4>
        <div class="tabbed_area">
     
    <ul class="tabs">
        <li><a href="javascript:tabSwitch_2(1, 3, 'tab_2_', 'content_2_');" id="tab_2_1" class="active">FORUMS</a></li>
        <li><a href="javascript:tabSwitch_2(2, 3, 'tab_2_', 'content_2_');" id="tab_2_2">ARTICLES</a></li>
        <li><a href="javascript:tabSwitch_2(3, 3, 'tab_2_', 'content_2_');" id="tab_2_3">MONEY</a></li>
    </ul>
     
            <div id="content_2_1" class="content">Content for Tab 1</div>
            <div id="content_2_2" class="content">Content for Tab 2</div>
            <div id="content_2_3" class="content">Content for Tab 3</div>
        </div>
     
    </div>

  5. #5
    SitePoint Zealot sdavis2702's Avatar
    Join Date
    Sep 2007
    Location
    Austin, TX
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly. Thanks a lot!!! I really appreciate the help.
    I build WordPress with the Volatyl Framework.


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
  •