Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery Slider Div

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #43292
    rczilok
    Member

    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!

    #127689
    CrocoDillon
    Participant

    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.

    #127693
    rczilok
    Member

    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.

    #127741
    Mottie
    Member

    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 });
    });

    });

    #127801
    rczilok
    Member

    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

    #127802
    Mottie
    Member

    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
    });

    #127803
    rczilok
    Member

    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!

    #127993
    Philben
    Participant

    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;

    });

    });

    #127994
    Philben
    Participant

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

    #129194
    GLeonio
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.