Results 1 to 10 of 10

Thread: Tabbed Panel

  1. #1
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Tabbed Panel

    Hello guys,

    I am trying the create a functioning tabbed panel for my blog. So far, I was able to do the HTML and CSS part. However the tabs don't work i.e. they are not clickable. Any advice will be greatly appreciated. Thank you.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Could we possibly see your code? If you want to just hijack some javascrit for it, here is a list of some good tabs:
    http://speckyboy.com/2010/09/08/30-c...abs-solutions/
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi friend,

    Many thanks for your reply. Please find attached the HTML code.
    What would you recommend?







    PS. I have read that CSS3 is not fully supported.

  4. #4
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The tabbed panel would look like the attached picture. The HTML code I attached gives this result except that the tabs are not clickable

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Ok, so what you want to do, is use this code: (I've used jquery for a nice little fade effect.:
    So depending on the name of each tab and piece of content, put:
    Code:
    $("#div-one").click(function(){
        $("#content-two").fadeOut(500);
        $("#content-one").fadeIn(500);
    });
        
        
    $("#div-two").click(function(){
        $("#content-one").fadeOut(500);
        $("#content-two").fadeIn(500);
    });
    In the JavaScript. In this, #div-one and #div-two should be the id's of the tabs, and content-one content-two should be the id's of the content, the one with the fade in command has to be the one you want to appear when you click the tab. You can add this more times for as many tabs as you like.
    Remember to reference the jquery library in the head:
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #6
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Lovely idea with the fade in effect... Thank you so much... please forgive my clumsiness if I ask you where I need to place this code as I am new to JQuery and JavaScripting... but I am learning a lot.... I know of course where to place the HTML code

  7. #7
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    That's perfectly fine, you will need to place the jquery inside:
    Code:
    <script type="text/javascript">
    // code
    </script>
    Tags in the head of the page. The reference to the jquery library also has to go in the head. Also, don't forget to change the names of the divs referenced in the code appropriately to your HTML.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  8. #8
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much. I'll work on it and will revert back to you.

  9. #9
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Working on it.

  10. #10
    Join Date
    Jun 2011
    Posts
    61
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ok, I added the codes inside the head tag.
    I am trying to make the code reference to the HTML and I'm having difficulty. Here is what I've done so far, and it is not working

    HTML Code:
    <script type="text/javascript">
    $("#tabs").click(function(){
        $("#tab-pop").fadeOut(500);
        $("#tab-latest").fadeIn(500);
    });
        
        
    $("#tabs").click(function(){
        $("#tab.comm").fadeOut(500);
        $("#tab-tags").fadeIn(500);
    });
    
    </script>
    Will be grateful for your 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
  •