Forums

henrycharge

I've been working on a simple content slider using jQuery to load content sideways into a container.

I've got it so far with a tabbed navigation on the top of the box to load each box of content into the frame when clicked, what I'd like to do is also have a previous and next navigation on the sides.

This is what I've got so far http://jsfiddle.net/hcharge/4q3GZ/5/ I was hoping somebody could give me some pointers as to how I would use jQuery to have the previous and next navigation...

Many thanks

Henry

Mottie

Hi Henry!

I modified the code a bit just to clean it up with some standard code practices. Here is the updated demo and the code:

$(document).ready(function() {

    var height = 300,
        width = 600,

        slides = 3,
            
        tabs = $('.tab'),
        contentNum = 1;
    
    $('.main_inner').css({
        width: slides * width
    });

    $('a.tab_link').click(function() {

        tabs.filter('.active').removeClass('active');
        $(this).parent().addClass('active');
        
        // make sure contentNum is a number and not a string
        contentNum = parseInt( $(this).attr('rel'), 10 );

        $('.main_inner').animate({
            marginLeft: '-' + (width * contentNum - width)
        }, 600);

        return false;

    });

    $('.previous a').click(function(){
        if (contentNum > 1) {
            // find previous tab, trigger a click on the link
            // subtract 2 because eq() uses zero based index
            tabs.eq(contentNum - 2).find('a').trigger('click');
        }
        return false;
    });
    
    $('.next a').click(function(){
        if (contentNum < slides) {
            // find next tab, trigger a click on the link
            // contentNum doesn't need + 1 because it is +1 relative to eq()
            // which is a zero based index
            tabs.eq(contentNum).find('a').trigger('click');
        }
        return false;
    });
    
});

henrycharge

Wow! Thanks a lot :-)

benjaminbrook

That is awsome! Any way to make it automatic?

Mottie

Hey @benjaminbrook!

I've updated the demo with this code; I renamed a few things, so I'll just show all of the code:

$(function() {

    var height = 300,
        width = 600,

        tabs = 3,

        $tabs = $('.tab'),
        contentNum = 1,

        delay = 2000, // time in milliseconds to pause between tabs
        timer;

    $('.play').click(function(){
        var $t = $(this);
        if ($t.hasClass('playing')) {
            // stop
            clearTimeout(timer);
            $t.removeClass('playing').html('play');
        } else {
            // play
            timer = setInterval(function(){
                contentNum++; // change to contentNum--; to go left
                if (contentNum > tabs){ contentNum = 1; } // loop right
                if (contentNum < 1) { contentNum = tabs; } // loop left
                $tabs.eq(contentNum-1).find('a').trigger('click');
            }, delay);
            $t.addClass('playing').html('stop');
        }
    });

    $('.main_inner').css({
        width: tabs * width
    });

    $('a.tab_link').click(function() {

        $tabs.filter('.active').removeClass('active');
        $(this).parent().addClass('active');

        // make sure contentNum is a number and not a string
        contentNum = parseInt( $(this).attr('rel'), 10 );

        $('.main_inner').animate({
            marginLeft: '-' + (width * contentNum - width)
        }, 600);

        return false;

    });

    $('.previous a').click(function(){
        if (contentNum > 1) {
            // find previous tab, trigger a click on the link
            // subtract 2 because eq() uses zero based index
            $tabs.eq(contentNum - 2).find('a').trigger('click');
        }
        return false;
    });

    $('.next a').click(function(){
        if (contentNum < tabs) {
            // find next tab, trigger a click on the link
            // contentNum doesn't need + 1 because it is +1 relative to eq()
            // which is a zero based index
            $tabs.eq(contentNum).find('a').trigger('click');
        }
        return false;
    });

});

downcasteyes

This is cool. I tried to manipulate it so that I could use only the previous and next features, without the tabs, and it wouldn't work. I'm pretty skilled with CSS, but JavaScript, not so much. Do the tabs have to remain defined in order for the Prev and Next links to work?

Mottie

HI @downcasteyes!

Actually the next and previous links simulate a click on the tab to make it change, so the answer is yes... you'll need the tabs for the links to work.

I'm not sure what type of functionality you might need, but don't be afraid to ask!

Podders

Just hide the tabs in the css, they will still retain their functionality, bit of a hacky way but will make that particular pen the way you want it ...

downcasteyes

Thanks for the responses. I did some tweaking yesterday afternoon and was essentially able to make it all work. I enhanced CSS for the Prev and Next so they'll behave more like buttons and moved them farther down. Reduced the tabs to just be 1,2,3 etc. pagination, which works for the purposes I need it to. So I'm good! And my Boss was pleased. =)

downcasteyes

Okay guys... Now I've got an issue with my CSS. If I put a link in the content div, it inherits some of the properties that I've applied to the links for the Previous/Next buttons. I changed the JS so that the .previous and .next were IDs instead of Classes, thinking this would help, and it did somewhat but the Content Links still inherit the background color. I've tried all sorts of ways of defining the Content Div to have their own link attributes, and nothing seems to be working.

I put together a jsfiddle; click next bttn to see link on tab 2 My demo code...

If anyone has the time to look over my code and give me some feedback, I'd really appreciate it. Maybe you'll see what I keep missing. =)

downcasteyes

I'm not sure if this is JS or just CSS related. If I should move this to the CSS forum, please let me know. I just didn't want to break it away from this thread, since it originated here. =/

downcasteyes

I figured it out. Removing the a:visited from the #next and #previous div IDs did the trick. And then added .content a:link and .content a:hover. Seems so simple to me the next day. Ha ha =)

Mottie

LOL, I'm glad you figured it out :)... I was just now getting around to looking at your demo.

treehouse : what would you like to learn today?

Forums

Simple jQuery Content Slider...