Jquery Slider Div

[rczilok]

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!

[CrocoDillon]

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.

[rczilok]

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.

[Mottie]

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

• One
• Two
• Three

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

});

[rczilok]

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

[Mottie]

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

[rczilok]

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!

[Philben]

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;

});

});

[Philben]

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

[GLeonio]

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/

[Author]

Posts