Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

Written by Kevin Liew on 14 Jul 2009 •
709,863 Views • Tutorials

Introduction

Content Sliding website is one of the famous and creative design techniques for portfolio website. One thing, please make sure you put the menu on every single page to avoid confusion/dizziness.

You should put the navigation menu in every single page
Or, fix the position of the menu
Let your visitors know exactly what section they're reading, like highlight the selected menu item and have a clear title

In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! Don't worry, we won't rely on javascript too much, we will use css/html for the layout and javascript only do the scrolling. And hey, it will still work even if your browser doesn't support javascript.

And, thanks to Ariel Flesler, his scrollTo plugin is simply amazing!

1. HTML

Depend on which direction you want to scroll your website, each of them have slightly different layout. For the horizontal and vertical, they use the same layout, whereas for diagonal, you have to add extra div to create the "diagonal". It sounds like a dirty trick, but hey, it works! :)

I put <a name="name"></a>, just in case some of the browsers out there don't support javascript.

Scroll Horizontally & Vertically

<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>
<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>

Scroll Diagonally

<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>
<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>

2. CSS

The CSS is basically almost the same with the tabbed based content slider tutorial. I have illustrated how it works in that tutorial, so you might wanna check that out as well.

Scroll Horizontally & Diagonally

#mask : height=100%, width = 100% * total of items
.item : height=100%, width = 100% / total of items

body {
	height:100%;
	width:100%;
	margin:0;padding:0;
}

#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:0;left:0;
	background-color:#ccc;
	overflow:hidden;
}

	#mask {
		width:500%;
		height:100%;

		background-color:#eee;
	}

	.item {
		width:20%;
		height:100%;
		float:left;
		background-color:#ddd;
	}
	
	
	.content {
		width:400px;
		height:300px;
		top:20%;
		margin:0 auto;
		background-color:#aaa;
		position:relative;
	}
	
	.selected {
		background:#fff;
		font-weight:700;
	}

	.clear {
		clear:both;
	}

Scroll Vertically

The width and height are opposite from scrolling horizontally. Calculations are:

#mask : width=100%, height = 100% * total of items
.item : width=100%, height = 100% / total of items

	#mask {
		width:100%;
		height:500%;
		background-color:#eee;
	}

	.item {
		width:100%;
		height:20%;
		float:left;
		background-color:#ddd;
	}

3. Javascript

So, you must be thinking how complicated the javascript would be. You'll be surprise! its only a line of code to make the scrolling effect. Thanks to jquery.scrollTo Plugin. What we have to do is solve the layout using css/html, and the plugin will do the rest.

$(document).ready(function() {

	//get all link with class panel
	$('a.panel').click(function () {

                //reset and highlight the clicked link
		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		
		//grab the current item, to be used in resize function
		current = $(this);
		
                //scroll it to the destination
		$('#wrapper').scrollTo($(this).attr('href'), 800);		
		
                //cancel the link default behavior
		return false;
	});


	//resize all the items according to the new browser size
	$(window).resize(function () {
		
		//call the resizePanel function
		resizePanel();
	});
	
});

This resize function have 2 versions. One for vertical and another for both horizontal and diagonal. The only difference is the mask_height and mask_width.

Vertical

function resizePanel() {

	//get the browser width and height
	width = $(window).width();
	height = $(window).height();

	//get the mask height: height * total of items
	mask_height = height * $('.item').length;
		
	//set the dimension		
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: width, height: mask_height});

	//if the item is displayed incorrectly, set it to the corrent pos
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}

Horizontal & Diagonal

function resizePanel() {

	//get the browser width and height
	width = $(window).width();
	height = $(window).height();

	//get the mask width: width * total of items
	mask_width = width * $('.item').length;
		
	//set the dimension	
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	
	//if the item is displayed incorrectly, set it to the corrent pos
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}

Conclusion

That's it, simple and easy! I hope you all will enjoy it.

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. You can subscribe to my RSS for more jQuery tutorial posts! Or go to my website footer to follow me on twitter, and buy me a drink! Thanks!

Jump to Certain Item on Page Load

This is one of the most popular request. A lot of people want this content slider to display certain item on page load. It's simple, you need to use this:

$(document).ready(function () {

   $('#wrapper').scrollTo('ITEM-ID-HERE', 0); 

   ......
   ......
   ...... 
}

With that line of code, the slider will jump to the item on page load.

Update

31 Aug 2009 : Due to popular demand, and something I should have created. I have added window resize function.

Demo 1 Demo 2 Demo 3

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

792 comments

Xarcell 15 years ago

is it possible to apply more than one horizontal slider to a page? I have tried, but cannot figure it out. nI've added 3 sliders, but only the third one shows.

ciara luke 15 years ago

really like this but am i able to keep all my links on each section as i would really like this feature for my website

Kevin Liew Admin 15 years ago

You can put whatever content you want in it.

rab 15 years ago

when i use this with MooTools zoom then it works fine but mootool query does not work. any solution

Kevin Liew Admin 15 years ago

must be conflict with jquery. try to use jquery.noconflict() method.

Simon 15 years ago

Any idea why this type of menu is breaking it? see here:

http://stackoverflow.com/questions/6650425/jscrollto-bugging-out-in-ie7-8-works-fine-in-ff-and-ie9

Simon 15 years ago

I got "SCRIPT438: Object doesn't support this property or method" in IE8/7 errors and fixed it by changing the code:

$(document).ready(function() {

$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this); //old line (delete this)
var selected = $(this); //new line (keep this)
$('#wrapper').scrollTo($(this).attr('href'), 1000);
//
return false;
});

dav0r 15 years ago

At first I would like to thank you - this Plugin works great!
I'm a n00b at jQuery and there are a few questions I have:

Is there a way to get a feedback at which item you are looking at the moment? I have a list of links to each item fixed on top and two arrows besides each item to slide to the next and to the previous item. Now the Problem: I generate the items with an PHP script - there might be >20 items in the future. I don't want to display every single link, but a range within the current item. Say if you are at item12 it shows the links from 6 to 18 (+first and last). Is there a way to do this? I know this can't be done in PHP - is there a javascript-way?

(p.s. starting a netlabel)
greetings from the austrian alps ; )

dav0r 15 years ago

atm I'm looking for a way to somehow return the position via window.location.hash (so users can link directly to one item). But I have to read a bit ; )

Kevin Liew Admin 15 years ago

Sorry for the late reply dav0r. I assume you are talking about the selected item. I think you can get it from the menu, because selected item will have a class called selected. $('a.selected') should return the current selected page.

Rho 15 years ago

Is there any simple way to set .content to 100% width and height to accommodate a fluid template?

Kevin Liew Admin 15 years ago

You just have to change it in the CSS.

David 15 years ago

I'm using the diagonal one and need to add more panels to the design. What is the proper way to do it?

Kevin Liew Admin 15 years ago

well, for diagonal, if you have 5 pages, you will need to create a 5*5 blocks.

David 15 years ago

Gotcha, how do I create "5*5 blocks?" Thanks!

Kevin Liew Admin 15 years ago

Look at the diagram for diagonal layout. That's 3x3. In every single row add two items and add another 2 rows for 5x5 layout.

David 15 years ago

Another Question: Did someone finde a way to deeplink to one of the pages? I keep experimenting with location.hash, but it don't works well..

Kevin Liew Admin 15 years ago

I have some ideas how to get this work:

first, you need to append the item id. for example, http://www.test.com/#item2 <-- point to page two
then, using javascript to read the hash tag, if hash tag is found, execute this command:

$('#wrapper').scrollTo(hashtag, 0);

*hashtag would be the variable that contains the real hash tag which is the id of the item, in this case #item2.

sofia 15 years ago

Great tutorial, thanks! But the browser back button does not works (it links the previous page, not the previous anchor)... Do you have any solution?

SIMONE 15 years ago

SIMPLY TOP. u saved my life! thanks mate!

Benjamin R Kibbey 15 years ago

A note to anyone as obtuse as I was, you can set the wrapper to any width/height you want (for instance in the case of this page www.borderlandpr.com) so that you can surround your scrolling material and make it appear to "disappear" behind a mat of other visual effect on the edges, but you have to change both the css and java script that's in the page.

Example css:
#wrapper {
width: 920px;
height: 770px;
position: relative;
margin: auto;
top:0;left:0;
background-color:#ccc;
overflow: hidden;
}

Example java:

$('#debug').html(width + ' ' + height + ' ' + mask_width);

$('#wrapper, .item').css({width: 920, height: 770});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

If you don't change the java, the wrapper will resize to 100% when you change the size of the browser window.

Aimery 15 years ago

Thank you Benjamin, for your clarification of the wrapper class. I had some difficulties in incorporating the required 'hidden' characteristic with page loading on scrolling and resize in IE. For some reason, other browsers like FF weren't running into this issue. Cheers, mate!

Benjamin R Kibbey 15 years ago

Also, for anyone encountering issues with the math, you don't have to use all the potential "item"s, so if you want to have 6, 7, 8 or 9 sections, simply set your widths/heights for 10. So, instead of 500% and 20%, 1000% and 10%. Just don't link to/build content for the sections you won't use. You could even use this to ad some sort of transition of a picture or color that is "flown over" by doing 10 sections and only linking to 1, 3, 5, 7 and 9; then putting pictures in sections 2,4,6 and 8.

Another fun trick, say you want to use this to create a horizontally scrolling set-up with columns of type like a newspaper or magazine, such that some of the last page shows on the current to page in order to help the reader keep place. Just cut your "item" measurement in half. (So, 500% and 10% instead of 500% and 20%). If scrolling horizontally, the right half of the page will move to the left half of the page and the new content will move into the right half of the page.

Anyway, I'm new to Javascript and figuring this all out, and this is stuff that took me a weekend to figure out by trial, error and slapping myself on the forehead going "duh!" So, I figured I'd put it here in case it helps anyone else.

Previous 1 2...192021...35 36 Next

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

Introduction

1. HTML

Scroll Horizontally & Vertically

Scroll Diagonally

2. CSS

Scroll Horizontally & Diagonally

Scroll Vertically

3. Javascript

Conclusion

Jump to Certain Item on Page Load

Update

TRENDING Post

Javascript Library