Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: Need Tabs

  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Need Tabs

    Hey guys, No clue what the code is for this. I did try creating one but it dramaticly failed. Just wondering what is the code for a box with tabs where if you click the tabs it provides information i the box below. and does not link you to a site. And i need 6 tabs on it. Thanks for people that can provide.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    What you're looking for is Javascript, and if its dynamic, AJAX. Basically you design a box and 6 tabs, with 6 hidden content pieces within. Have one default to showing, and when someone clicks a tab, have it hide the current content and display the new content.

    Remember: PHP is a processing language, at the end all it sends to the user is text. If you have it send HTML, the user gets HTML. If you have it send JS, the user gets JS. PHP doesn't do anything on the users end.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Depends how you want it to work. You can use javascript to show/hide content, or as Keleth said, AJAX, or you can use php to show content based on, say a string in the URL using $_GET.

    For example with php, you would have a link in the tab

    Code:
    <div class="tab"><a href="?tab=1">Tab1</a></div>
    <div class="tab"><a href="?tab=2">Tab2</a></div>
    Then in your php, you would check to see if any of the tabs were set

    PHP Code:
    $ts $_GET['tab']; 
    Then just a matter of displaying content based on which tab was selected.

    PHP Code:
    if($ts == 1){
    echo 
    'tab 1 was clicked';

    edit, sorry misread the original post on what exactly you were looking for

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    50
    Thanks
    5
    Thanked 1 Time in 1 Post
    do you have dreamweaver it has some cool tabbed pannels you can use




    http://www.google.co.uk/search?clien...=Google+Search

    http://labs.adobe.com/technologies/s...nel_sample.htm

    if you have not tell me and i will try and knock you something up using spry(ajax/javascript/html)

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nope i use Microsoft Expression Web

  • #6
    New Coder
    Join Date
    Feb 2010
    Posts
    50
    Thanks
    5
    Thanked 1 Time in 1 Post
    is that tabbed panel in the pic what u want????

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure please.

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    50
    Thanks
    5
    Thanked 1 Time in 1 Post
    will do it now
    so you want that panel with 6 tabs correct if i am wrong

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    6 panels
    Katar
    Cariae
    Sarissa
    Hatzring
    Azura-EU
    Tairen

    (Don't ask about the names XD)

  • #10
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    So this is... a JS question, or an HTML one or what? I need to know where to move this to.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #11
    New Coder
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    php =/

  • #12
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    If you are just getting premade code, make sure to figure out whats going on too... I'm not a fan of code that comes right out of stuff like dreamweaver... its messy, inefficient, and trying to fix it to do something you want later on is a pain.

    As far as things go, this is a pretty easy module to build on your own

    Code:
    <div id="tabbedContent">
    <div id="tab1" class="tab">Tab 1</div>
    <div id="tab2" class="tab">Tab 2</div>
    <div id="tab3" class="tab">Tab 3</div>
    <div id="tab4" class="tab">Tab 4</div>
    <div id="tab5" class="tab">Tab 5</div>
    <div id="tab6" class="tab">Tab 6</div>
    <div id="content1" class="content">Content 1</div>
    <div id="content2" class="content">Content 2</div>
    <div id="content3" class="content">Content 3</div>
    <div id="content4" class="content">Content 4</div>
    <div id="content5" class="content">Content 5</div>
    <div id="content6" class="content">Content 6</div>
    </div>
    In your CSS, set the tabs to float with a width according to what you want so they stack horizontally, and hide all the content you don't want. Then with the JS, do something like

    Code:
    document.getElementById('tab1').click = function() {
    document.getElementById('tab1').style.display = 'display';
    document.getElementById('tab2').style.display = 'none';
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    }
    Its a bit messy, and there are cleaner ways of doing it, such as a framework, but it'll do the job on short notice.
    Last edited by Keleth; 06-22-2010 at 09:22 PM.

  • #13
    New Coder
    Join Date
    Feb 2010
    Posts
    50
    Thanks
    5
    Thanked 1 Time in 1 Post
    done if you pm me your email ill send it u now just knocked up something with dream weaver you can edit all looks eg colour size est by the css.

    do anything u want with it.
    Last edited by phpcodelearner; 06-22-2010 at 09:23 PM.

  • #14
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Quote Originally Posted by JasonReynolds View Post
    php =/
    This isn't a PHP topic at all, as I mentioned early on. PHP can't alter content on the user end... PHP simply processes a file and sends the user text. If you're looking for how to make tabbed content, this is a JS question. If you're curious if this can be done without JS, its more an HTML question, but lest there is some big piece of HTML I don't know, it can't be done without JS.

  • #15
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Fou-Lu View Post
    So this is... a JS question, or an HTML one or what? I need to know where to move this to.
    I think you need to move it to Freeloaders' Corner.

    Oh, wait. There's not one of those.
    Are you a Help Vampire?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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