So I had an interesting project recently where they needed a way to “slide” the pages in and out. At first I thought this would be a simple problem to solve as jQuery has so many slider plug-ins that it’s practically a cottage industry. But there was a problem. The site content had already been created and this slide effect needed to be bolted on “after the fact.” After various trials with different jQuery sliders, I thought I found a good enough solution. Unfortunately it would require the client to re-write their content into the new “model” which would be a fair amount of work.
And I thought I was done – it met the clients’ needs, they were happy with the solution even though they would need to put in a lot of work to get their existing content into it. They understood the technical reasons why they would need to do this.
But…this was such a fascinating problem that I couldn’t stop playing around and seeing if there might be a better solution. Something a little more light-weight and that would play well with the existing content.
So to better the world here is my code – I don’t claim it’s the best, I don’t claim it will solve *your* problems, and I certainly don’t claim any guarantees. Use at your risk, no support provided, yada, yada.
First our HTML (cut down to just the important parts):
<nav> <ul> <li><a href="page1.html" data-href="#page1">Page 1</a></li> <li><a href="page2.html" data-href="#page2">Page 2</a></li> <li><a href="page3.html" data-href="#page3">Page 3</a></li> <li><a href="page4.html" data-href="#page4">Page 4</a></li> </ul> </nav> <div id="pager"> <div id="page"> Enable javascript for best results... </div> </div>
So a little explanation of the above html. We are using HTML5, we have our navigation with the links, the links have the href attribute to provide accessibility in case Javascript is disabled, and we have a custom data- attribute allowed by HTML5 so we can use this as our hooks to do all the cool jQuery action. Finally we have our “pager”, a container to hold our sliding “pages”, and of course, our “page” where we will load in our content.
And the CSS:
body{
overflow-y: scroll;
}
#pager{
width:960px;
}
#page{
position:relative;
left:0px;
}
.pageTile{
max-width:900px;
min-width:320px;
min-height:420px;
/*This class comes from the content pages we're loading in*/
}
Now for the jQuery fun (please note I do use the jQuery easing plugin to provide more easing options):
<script>
$('.pagerNav li a').attr('href', '#');
$('#page').load('page1.html');
jQuery.easing.def = "easeInOutQuad";
$('a[data-href="#page1"]').click(function(){
$('#page').animate({left:'-3000px'}, 300, function() {
$('#page').css({left:'3000px'});
$('#page').load('page1.html');
window.location = window.location + '/page1.html';
});
$('#page').animate({left: '0px'}, 300);
});
//repeat as needed for all your "pages" you'll be loading in
</script>
So let’s go through the script. First, we’ll replace the href attribute of our navigation thus ensuring that only the Javascript functionality will trigger showing the content. Again, if no Javascript is available, then the href will act as normal. Next we load in content to the page using jQuery’s .load() function so users aren’t staring at a blank page when they first visit. Next we define our custom easing we want to use (again, using the excellent jQuery Easing plugin). We then capture the “click” of the link. This triggers the “page” to slide off left. Once that’s complete, we reset the “page” position way off screen on the right where we also load in the new content. We then change the browser window’s location to help users understand where they are. And then we bring our “page” back on screen with it’s new content, animating it sliding in from the right to the left.
This is pretty basic code, it should work well and not impact other jQuery plugins or even jQuery versions. And it looks like I could fairly easily turn it into a plugin.