SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with duplicating a tabbed box

    I was given some sample code to use for a rounded corner tabbed box and got it set up the way I needed but when I try to duplicate it so another tabbed box is underneath it with different information for each tab--I run into trouble. I do not have much experience with javascript.

    I changed the id names etc.. for the second box and it seem like everything was fine until I loaded the page in the browser for the first time. Then the box on top showed all the tabs content instead of just information for the first tab. It didn't do that until I added the box underneath. How do I create two tabbed boxes that function the same but have different content? Thank-you-hope this isn't too much help to ask for.

    Here is the code I started with:

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function clearcontent() {
    if (document.getElementById)
    {
    var style2 = document.getElementById("home").style;
    var tabcurrent = document.getElementById("link1").style;
    var style3 = document.getElementById("about").style;
    style3.display = "none";
    var style4 = document.getElementById("contact").style;
    style4.display = "none";
    var style5 = document.getElementById("links").style;
    style5.display = "none";
    }
    }
    window.onload=clearcontent;

    function toggleLayer(whichLayer,turnoff1,turnoff2,turnoff3)
    {
    if (document.getElementById)
    {
    var turnon = document.getElementById(whichLayer).style;
    var turnoff1 = document.getElementById(turnoff1).style;
    var turnoff2 = document.getElementById(turnoff2).style;
    var turnoff3 = document.getElementById(turnoff3).style;
    turnon.display = "block";
    turnoff1.display = "none";
    turnoff2.display = "none";
    turnoff3.display = "none";
    }
    }
    //--><!]]></script>
    </head>
    <body>
    <ul id="tab" name="tab">

    <li class="first"><a id="link1" onclick="toggleLayer('home','about','contact','links');return false;" href="#"><span>Home</span></a></li>
    <li><a onclick="toggleLayer('about','home','contact','links');return false;" href="#"><span>About us</span></a></li>
    <li><a onclick="toggleLayer('contact','about','home','links');return false;" href="#"><span>Contact</span></a></li>
    <li><a onclick="toggleLayer('links','about','contact','home');return false;" href="#"><span>links </span></a></li>
    </ul>
    <div id="liquid-round">
    <div class="top"><span></span></div>
    <div class="center-content">

    <!-- CONTENT BEGIN -->
    <div id="home">
    <p>Established in 1997, the Barnes Group is a think tank and technical consortium of independently-owned dental laboratories from across North America. Our members focus on growth and meeting the challenges of our changing profession. </p>

    </div>
    <div id="about">
    <p>About text : About text : About text : About text :
    /p>
    </div>
    <div id="contact">

    <p>Contact us : Contact us : Contact us : Contact us : </p>
    </div>
    <div id="links">
    <p>Link text : Link text : Link text : Link text : Link text : </p>
    </div>
    <!-- CONTENT END -->
    </div>
    <div class="bottom"><span></span></div>
    </div>

  2. #2
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi jangolee!

    It doesn't sound like I did much different than the way you did it, but it seems to work in both IE and FF on my two computers. Check it out and see if it works for you. I renamed all the ids in the second groups, both the list and the divs. I added the number 2 to the ids and variables from the first content section and did not change any of the classes you defined.

    It doesn't look pretty on mine because it doesn't have the CSS, and you might find that makes a difference to how the code works. But hopefully this should work fine. You may need to add some bits to your CSS. Any of your CSS that includes an id (e.g. #home, etc.), you will probably need to copy and include the same CSS for the new ids in the second list and the second content sections. Otherwise you should be good to go.

    I'll cross my fingers for you.

    Code:
    <html>
    <head>
     
    <!--  Javascript functions  -->
     
    <script type="text/javascript"><!--//--><![CDATA[//><!--
     
    function clearcontent() {
     
    if (document.getElementById)
    {
    var style2 = document.getElementById("home").style;
    var tabcurrent = document.getElementById("link1").style;
    var style3 = document.getElementById("about").style;
    style3.display = "none";
    var style4 = document.getElementById("contact").style;
    style4.display = "none";
    var style5 = document.getElementById("links").style;
    style5.display = "none";
    }
    }
     
    window.onload=clearcontent;
     
     
    function toggleLayer(whichLayer,turnoff1,turnoff2,turnoff3)
    {
    if (document.getElementById)
    {
    var turnon = document.getElementById(whichLayer).style;
    var turnoff1 = document.getElementById(turnoff1).style;
    var turnoff2 = document.getElementById(turnoff2).style;
    var turnoff3 = document.getElementById(turnoff3).style;
    turnon.display = "block";
    turnoff1.display = "none";
    turnoff2.display = "none";
    turnoff3.display = "none";
    }
    }
     
    //--><!]]></script>
     
    </head>
    <body>
     
    <!--  Box1 Tabs  -->
     
    <ul id="tab" name="tab">
     
    <li class="first"><a id="link1" onclick="toggleLayer('home','about','contact','links');return false;" href="#"><span>Home</span></a></li>
    <li><a onclick="toggleLayer('about','home','contact','links');return false;" href="#"><span>About us</span></a></li>
    <li><a onclick="toggleLayer('contact','about','home','links');return false;" href="#"><span>Contact</span></a></li>
    <li><a onclick="toggleLayer('links','about','contact','home');return false;" href="#"><span>links </span></a></li>
     
    </ul>
     
    <div id="liquid-round">
    <div class="top"><span></span></div>
     
    <div class="center-content">
     
    <!-- CONTENT1 BEGIN -->
     
    <div id="home">
    <p>Established in 1997, the Barnes Group is a think tank and technical consortium of independently-owned dental laboratories from across North America. Our members focus on growth and meeting the challenges of our changing profession. </p>
    </div>
     
    <div id="about">
    <p>About text : About text : About text : About text : </p>
    </div>
     
    <div id="contact">
    <p>Contact us : Contact us : Contact us : Contact us : </p>
    </div>
     
    <div id="links">
    <p>Link text : Link text : Link text : Link text : Link text : </p>
    </div>
    <!--  CONTENT1 END  -->
     
    <!--  Box2 Tabs  -->
     
    <ul id="tab2" name="tab">
     
    <li class="first"><a id="link12" onclick="toggleLayer('home2','about2','contact2','links2');return false;" href="#"><span>Home</span></a></li>
    <li><a onclick="toggleLayer('about2','home2','contact2','links2');return false;" href="#"><span>About us</span></a></li>
    <li><a onclick="toggleLayer('contact2','about2','home2','links2');return false;" href="#"><span>Contact</span></a></li>
    <li><a onclick="toggleLayer('links2','about2','contact2','home2');return false;" href="#"><span>links </span></a></li>
     
    </ul>
     
    <div id="liquid-round">
    <div class="top"><span></span></div>
     
     
    <!-- CONTENT2 BEGIN -->
    <div id="home2">
    <p>Established in 1997, the Barnes Group is a think tank and technical consortium of independently-owned dental laboratories from across North America. Our members focus on growth and meeting the challenges of our changing profession. </p>
     
    </div>
    <div id="about2">
    <p>About text : About text : About text : About text : </p>
    </div>
     
    <div id="contact2">
    <p>Contact us : Contact us : Contact us : Contact us : </p>
    </div>
     
    <div id="links2">
    <p>Link text : Link text : Link text : Link text : Link text : </p>
     
    </div>
    <!-- CONTENT2 END -->
     
    </div>
     
    <div class="bottom"><span></span></div>
    </div>
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    box...

    Hi,
    Thank you so much!! I guess I had the right idea, but must of missed something. I appreciate your quick reply and help. When I cut/paste your only code into a balnk page in dreamweaver to test it --I still have the same problem but it is happening to the opposite box now (the bottom box). All the tab's content on the bottom box shows when it is first loaded and then if I click on a tab it behaves the way I want. I tested it in both browsers. The top box works correctly each time I load the page. I cleared the history, cache etc. Doesn't seem to make a difference. Any other ideas of what I might be doing wrong?
    Last edited by jangolee; Jul 6, 2007 at 06:08.

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree, if it's affecting the opposite box, it's probably not a cached page issue. It's weird that it behaves so differently for each of us. I *hate* compatibility issues, they're the nastiest. Can you post the page you tried with two boxes? And your CSS too?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you didn't already get my email. Things went badly. I received the page you're having problems with, and did a quick test. It renders and behaves itself on my computers. It must know it's a guest and is minding it's manners.

    Let me download all the images and stuff tomorrow, when I'm not falling asleep. I'll see if some of the CSS might be throwing a monkey wrench in. I've seen CSS do funny funky things. We'll see.

    What kind of computer and OS are you running? And don't worry. We'll figure this out.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mad boxes

    Hi,
    I got your email and thought I would try posting here again too. I attached a screen shot (I had to piece it together though couldn't fit it into one shot) of what it looks like for me. It happens in IE7 and Firefox only to the second box and only when first loaded. I tried changing some of the code that I thought might control the 2nd box, but it just messes both boxes up. Thanks for your help. I am using Windows XP on a Sony Vaio laptop.
    Attached Images Attached Images
    Last edited by jangolee; Jul 10, 2007 at 09:19.

  7. #7
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well @#$^@$&!@#$.

    Ok, first, it sounds like you and I should be testing it on relatively similar setups. Just one more reason I don't understand why we're getting such different results.

    To add to the fun. Once I downloaded all of the CSS and tried again, I only had ONE box. When I go into the webpage, I can't see where I ever had the second box. I sent you that picture though right? When I was first looking at it, I had two distinct tabbed boxes, that wasn't my imagination was it? Now I wish I'd saved the screenshot I made.

    In your screenshot it looks like the first box is fine, but all the tabs appear in the box one right after the other. Is that correct? And it breaks in most, but works in IE6?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  8. #8
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :S and now that I see what it's supposed to look like. I realize that on my computer, even the original version looked like someone took a shotgun to it. The divs that are supposed to be display:none have been splattered up agains the right margin of the browser window.

    Did you try to test this on the server, like you'd talked about? And if so, how did that go?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •