Build Fancy Tabs in jQuery that Fade Text

Build Fancy Tabs in jQuery that Fade Text from TheWebSqueeze on Vimeo.

14 Comments on "Build Fancy Tabs in jQuery that Fade Text"

  1. Sweet tutorial!

    I’ll have to use this on one of my sites!

  2. Mark says:

    Someone probably already said it, but:

    after splitting the url on the hash, if the one-th element of the resulting array is “undefined” make it “tab1″. Then you can just proceed as normal.

  3. Holger says:

    It is often difficult to explain to a client the complexity of a website. Thank you for your tutorial!

  4. Kp says:

    Looks good. Not bad.

  5. Great! it’s a well-done video tutorial with alive programmer, I mean with “on the fly” code breaks, that’s good! because some of us where looking for the break too!

    A time ago I made a jQuery tabs code that’s a little similar, but it doesn’t care about the URL as yours.

    Good!

  6. digisam says:

    Followed the tutorial and got it all working

    However, my tabbed interface is halfway down the page and whenevery i click the tabs, the page focuses on the anchor tab causing the page to jump so the tabs are at the top of the screen.

    Any ideas?

  7. digisam says:

    sorted

    add

    return false;

    to the end of the click function

  8. Jack F says:

    Hey digisam,

    Thanks for that info, should help a few people, glad you got it all working.

    Thanks for all the comments.

  9. steve says:

    Great Tutorial, thank you.
    Any suggestion, how can we implement ajax call, to load external files, instead of paragraph in the page.
    Also, how to fade tabs(not content) on hover?
    Regards

  10. Paul Warren says:

    I was able to follow along with the excellent video and get the javascript to work EXCEPT for the proper URLs. I am not able to refresh to a specific tab like Jack does at 20:43. Any ideas why?
    Here is the code, as best as I could copy it for the benefit of everyone:

    ul li {float: left; list-style: none; font-size: 12px; text-align: center; }
    li a {display: block; margin: 0 1px 0 0; height: 35px; width: 100px; background-color: #ccc; padding: 17px 0 0 0; border: 2px solid black;}
    p {clear: both; border: 2px solid black; width: 800px; position: absolute; margin: 55px 0 0 0; }

    active { color: red; border-bottom: none; background-color: white; }

    $(document).ready(function() {
    $(“p”).css(“display”, “none”);

    var curtab = window.location.href;
    curtab = curtab.split("#");
    curtab = "#" + curtab[1];

    $("a").each(function(i) {
    if(curtab == $(this).attr("href")) {
    $(this).attr("id", "active");
    } else {
    $(this).attr("id", "");

    }
    });

    if (curtab !== '#undefined') {
    $(curtab).css("display", "block");
    } else {
    $(".default").css("display", "block");
    var defid = "#" + $(".default").attr("id");

    $("a").each(function(i) {
    if(defid == $(this).attr("href")) {
    $(this).attr("id", "active");
    }
    })

    }

    $("ul li").click(function() {
    $("ul li").children().attr("id", "");
    $(this).children().attr("id", "active");
    var tabtocall = $(this).children().attr("href");
    $("p").fadeOut ("slow");
    $(tabtocall).fadeIn ("slow");
    });
    });

    </script>

    <ul>

    <li><a href="#tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    <li><a href="#tab3">tab 3</a></li>

    </ul>

    <p id="tab1" class="tab default">Tab 1</p>
    <p id="tab2" class="tab">Tab 2</p>
    <p id="tab3" class="tab">Tab 3</p>

  11. Jack Franklin says:

    Hi Paul, if you want to send me your email address to jack [at] jackfranklin.co.uk I can zip up the working version I have and send it to you, I can’t see any obvious mistake in your code, there must be one though! When you try to refresh like in the video, what happens?

    Thanks for the kind comments everyone.

    Jack.

  12. Ibrahim says:

    Thank you, I’ll certainly give it a try.

  13. Harry says:

    Photoshopped Image Killer is a very useful application to get detailed information of a JPEG image as for whether it has been Photoshopped. PSKiller opens and decodes your JPEG file, then several image statistics features are analyzed to see whether some of them are abnormal compared to those of untouched images.

Got something to say? Go for it!