Grow your CSS skills. Land your dream job.

Jquery Slider Div

  • # March 10, 2013 at 4:54 pm

    Hey.

    So I am trying to create this website in which every time you click a link the content of that page slides in from the right, and when you click on another page it is supposed to slide back in to the right and then the new page is supposed to slide in the same way.

    So far I have been able to make this work, they slide in, however I have no clue how to make them slide back out when I add a new content section.

    This is what I have so far: [here](http://jsfiddle.net/cPLct/1/ “here”)

    I haven’t been able to find anything that could really help me or is easy for me to understand.

    If anyone has any idea’s I’d really appreciate the help!

    -Thanks!

    # March 10, 2013 at 7:46 pm

    I made something like this to get you started:

    $(function() {
    // hides every ‘page’ except the :target
    $(‘#one, #two, #three’).not(‘:target’).hide();
    // current ‘page’ as jQuery object is :target or null
    var current = $(‘:target’);
    // make sure to change the selector for the click event
    $(‘a’).click(function() {
    // next ‘page’ as jQuery object
    var next = $($(this).attr(‘href’));

    if (current) {
    if (current[0] == next[0])
    // we are already on the ‘page’
    return;
    else
    // hide current ‘page’ (can add some slide logic here)
    current.hide();
    }
    // show next ‘page’ (slide logic here too)
    current = next;
    current.show();
    });
    });

    Without sliding functionality though, it’s just to get you started. I think this also works if some one comes to the page with target, haven’t tested though (target is like blabla/page.html#target_id), but that’s why I removed preventDefault stuff.

    # March 10, 2013 at 8:23 pm

    Thanks so much! This doesn’t fully answer my question, but it definitely gets me started! I’ll take a look at it and see if I can add the sliding functionality.

    Again, thanks.

    # March 11, 2013 at 9:51 am

    Hi rczilok!

    Try [this demo](http://jsfiddle.net/Mottie/cPLct/4/)

    There are a few things to note:

    * Wrap all of the content so we can use css position to move content around. If you need help understanding how css positioning works, [this tutorial](http://www.barelyfitz.com/screencast/html-training/css/positioning/) is very helpful!
    * Add a class name to each content block to make targeting them easier – I used `content` in this case.
    * Changing the width doesn’t always work, so change the left position of the content to animate it around.
    * A variable named `contentWidth` is set to contain the negative left position of the content to keep it hidden off screen to the left. It grabs the width of the first content block, not the widest.
    * The animate function that moves the content off the screen to the right is actually calculating the width of the browser window and moving the content past it. Then when the animation completes, it resets the left position to hide the content.

    Hopefully I added enough comments in the code so it is clear what each section is doing.

    Here is the full code for prosperity (in case jsFiddle breaks)

    HTML

    CSS

    .wrapper {
    position: relative;
    }
    .content {
    width: 300px;
    height: 300px;
    padding: 0;
    left: 0;
    top: 0;
    }
    .box {
    width: 300px;
    height: 300px;
    }
    #one .box {
    background: red;
    }
    #two .box {
    background: blue;
    }
    #three .box {
    background: green;
    }
    ul li {
    display: inline;
    padding-right: 10px;
    list-style: none;
    }

    Script

    $(function () {

    // get the width of the first content box
    // add a bit of extra so we end up with “-350px”
    var contentWidth = ‘-‘ + ($(‘.content’).width() + 50) + ‘px';

    // reposition the content here in case javascript is disabled
    $(‘.content’).css({
    position: ‘absolute’,
    left: contentWidth
    });

    $(“li a”).click(function () {
    event.preventDefault();
    var $blockID = $( $(this).attr(‘href’) );
    // if the content is already showing, don’t do anything
    if ($blockID.hasClass(‘visible’)) { return; }
    // hide any visible content
    $(‘.content.visible’)
    .removeClass(‘visible’)
    // move the old content past the current window width, then reset it’s position
    .animate({
    left: $(window).width()
    }, function () {
    // Remove left setting after the animation completes
    $(this).css(‘left’, contentWidth);
    });
    $blockID
    .addClass(‘visible’)
    .animate({ left: 0 });
    });

    });

    # March 11, 2013 at 6:51 pm

    This is just perfect! It’s almost exactly where I need it. The comments are super helpful.

    The only problem I have now is I want box to go right instead of left when it leaves the frame, if that’s possible. I’ve been playing around with it on my end, and I almost got it, but if you have chance to take a look at it, I would love you forever.

    You are really saving my butt, thank you!

    -Becca

    # March 11, 2013 at 6:56 pm

    To make it go left, just change the `$(window).width()` to `contentWidth` and remove the callback:

    // hide any visible content
    $(‘.content.visible’)
    .removeClass(‘visible’)
    // reset content position
    .animate({
    left: contentWidth
    });

    # March 11, 2013 at 7:00 pm

    Oh my gosh! I think I actually got it! It does exactly what I need! [Your text to link here...](http://jsfiddle.net/cPLct/14/ “here”)

    Thanks so much for the help, really!

    # March 13, 2013 at 12:22 am

    Hey! Mottie example works ok, but just in case you want to consider jQuery UI animation version; you may check [Your text to link here...](http://codepen.io/anon/full/wBaxF “jQuery UI version”). You’ll need both jQuery & jQuery UI links

    $( function(){
    $(“.module”).not(‘#one’).hide();
    var prevActive;
    $(“.nav li a”).on(“click”, function(){

    var active = $(this).attr(‘name’);

    if(prevActive !== active){
    $(“.module”).hide(‘slide’,{ direction: ‘left’}, 300);
    console.log(‘act: ‘+active);

    $(‘#’+active).toggle(‘slide’, { direction: ‘left’}, 1000);
    }

    console.log(‘prev: ‘+prevActive);
    prevActive = active;

    });

    });

    # March 13, 2013 at 12:24 am

    You’ll need to remove debugger “console.log()” references.

    # March 21, 2013 at 12:11 pm

    Hi Becca, I made a list of top resources on customizing jQuery sliders. Could be useful for your project. http://www.verious.com/board/Giancarlo-Leonio/top-jquery-image-and-page-slider-tutorials/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".