SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I turn my jQuery tabs into a slideshow with active tabs cycling also?

    I've got simple jQuery tabs and wondering if there is a fairly simple way a make the tab content crossfade (or just fade in) while also having the tabs cycle through their active state along with their corresponding content. Here's my blogsite where I have the current tabs http://www.roscoandroy.com

    Here's the jQuery:

    /
    Code:
    / JavaScript Document
    $(document).ready(function() {
    
    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    
    
    
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
        });
    });
    My tabs structure is like this.

    Code:
    <ul class="tabs">
        <li><a href="#tab1">TAB1</a></li>
        <li><a href="#tab2">TAB2</a></li>
        <li><a href="#tab3">TAB3</a></li>
        <li><a href="#tab4">TAB4</a></li>
        <li><a href="#tab5">TAB5</a></li>
        <li><a href="#tab6">TAB6</span></a></li>
    
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">tab1 content</div>
        <div id="tab2" class="tab_content">tab2 content</div>
        <div id="tab3" class="tab_content">tab3 content<</div>
        <div id="tab4" class="tab_content">tab4 content<</div>
        <div id="tab5" class="tab_content">tab5 content<</div>
        <div id="tab6" class="tab_content">tab6 content<</div>
        </div> <!--end tab_container -->
    THANKS for any help!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Not sure if this is what you mean, but once you've clicked on a tab, that tab should stay colored red (like when you hover). You can do that by adding this to your style sheet:

    Code:
    ul.tabs li.active a {
      background-image: url(images/fpnav_hov.png);
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your response ralph.m! I will add that in.

    The other part of what I'd like advice on is how to get the tabs/tab_content to cycle through like a slide show. I don't know if "cycle" is the right word - maybe "rotate"?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I'm not good at modifying these things, so I tend to look for one that's already set up to do that sort of thing, but it seems the slider you are using has the option to do what you want, so I'd recommend looking through the user notes for advice on how to set the slider to auto scroll:

    http://guides.slidervilla.com/pointelle-slider/

    Or you could check out another slider like this:

    http://demo.webdeveloperplus.com/fea...ontent-slider/

    Here are two others possibly of interest:

    http://css-tricks.com/examples/FeaturedContentSlider/

    http://www.pikachoose.com/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •