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

Written by Kevin Liew on 14 Jul 2009
709,847 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!

Advertisement

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.

Structure for jQuery share it toolbox

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 1Demo 2Demo 3Download
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.

Related Articles
Create a Fast and Simple Toggle View Content with jQuery
Create a Simple Infinite Carousel with jQuery
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
Andre 14 years ago
Hey once again : )
i implemented this script and it really works good. Unfortunately there is a problem which i do not understand:
I changed width and height in .content to 100%. Everything else is is almost like in your standard setting. I currently use vertical scrolling. If I resize my brower window without reloading it happens, that i get horizontal scrolling instead of vertical scrolling. Do you have any idea why this happens?
Reply
Lydia 14 years ago
Hi Kevin! thousand thanks for the great tutorial. I got the vertical scroller working with fixed navigation and 10 pages of content to scroll through.
There's just one thing I have been wondering how to do: I want to be able to hit an "up" or "down" button, (and eventually to activate the arrow keys to trigger this as well). I am a javascript n00b and can't for the life of me figure out how to go about doing this.
It's for my portfolio so I think it would be really nice if people could quickly scroll through the images using one button rather than having to hit each numbered link.
Thanks!!!
Reply
Сергей Сергеевич Бабич 14 years ago
Guys, please help!
I am a newbie in the creation of such web elements (javascript almost do not know).
But the question is:
Help to the standard pattern of this post, simply add header that will not move together with the main part, but will have buttons to switch between slides.
Aaron made ​​like this, but I can not properly understand.
Thanks in advance!
Reply
Jose 14 years ago
Hi I'm using this wonderful script in a continuos photo slider with two control links, this is very suitable for big screens and tablets as well, open the photo slider and resize your browser screen and you'll see what I'm talking about, I'm a javascript newbie and that is reflected in the code, but I'm posting this hoping could be useful for someone.
http://www.box.net/shared/j2kddmk71c7v5m0k18st
Reply
David 14 years ago
Great tutorial, thank you, I was looking a tutorial to do a horizontal web site and yours helped me greatly.
keep up the good work.
Reply
hanna 14 years ago
Thanks for great tutorial. But i am trying to get more item(div)s in a screen, and still move around fitting a div I select to middle of screen. when you looking at the demo of Scroll to, you can see more divs in the box..
but i tried to changed item size in css in diagonal layout. but when i change the browser's size, the divs which are around selected div is gone.
please help me out!
Reply
Kevin Liew Admin 14 years ago
Okay, I think you need to remove this:
$(window).resize(function () {

//call the resizePanel function
resizePanel();
});

It makes the div fit the whole screen on window resize.
Reply
hanna 14 years ago
It's working now...but when i make browser's size smaller, the divs overlapped..
Reply
Oliver 14 years ago
Is there a way of combining two together? I'd like to have a grid of 3 rows (vertical) and lets say, 5 collums (horizontal)
Reply
Kevin Liew Admin 14 years ago
Yes, you can use the diagonal layout.
Reply
Brandon 14 years ago
Hello!

It seems this still has a lot of support from the creator, so I thought I would give it a shot to see if y'all might be able to help me with my issue.

I am using this to horizontally scroll a website, and it works perfect in Chrome, but the scroll doesn't seem to work in Safari or Firefox. Does anybody know how to fix this?

For reference, you can visit: http://eldora.rmcad.edu/~bmannheimer/Education_Crisis/
But it is a work in progress, so please don't judge to harshly!

Thank you!
Reply
Kevin Liew Admin 14 years ago
This could be the issue:
content-area_width = width * $('.item').length;

content-area_width, I guess most browser will translate it as:

content - area_width (content minus area_width), in firefox it thrown an error "invalid left hand assignment".
Reply
Brandon 14 years ago
Kevin,

That was it! Thanks so much. But now I have encountered another issue, it seems when I add one more section on my Q & A page, it seems to break the rest of my scrolled pages… Is there anyway to fix this?

Thanks!
Reply
Rob 14 years ago
Hi - is it possible to make the browser back and forward buttons work with the slider?

Thanks
Reply
Kevin Liew Admin 14 years ago
yes it's possible but it's not in this tutorial. SWFAddress is what you need to make the back and forward button work.
Reply
noel 14 years ago
hey,
love your tut, used it on my page. however, when i set the overflow to auto, the scrollbar stops working when i slide to a content. it works on the first page - call it item1, then i click, say, item5 and it just goes completely bonkers and stays that way even when i go back to item1. any ideas why this could be? also, i tried to use backstretch - just like aaron - which was an utter failure. yeah, you guessed it, i'm completely new to javascript, jquery and basically anything non flash. please don't judge me.
thanks again for the tut and the script.
Reply
Josh M 14 years ago
I got the scrolling to work fine, but is there away to allow manual scrolling as well, im using this for a portfolio site and all of my content doesnt fit in the browser windo making only part of it visible.

Also when you go to my last section it brings the footer up to half way into the screen, can i get the scroll to only go down to the bottom of my screen, not bring it to the middle?
Reply
Kevin Liew Admin 14 years ago
You can remove overflow:hidden; in #wrapper.
Reply
Thomasvl 14 years ago
Hello,
I would like to use this tutorial but i can't get it right. I want to use the horizontal scroll, when i add the new item and change the mask:width to 600% and the item:width to 16,67%... I see multiple content on my first page, it seems that there are no margins anymore or something... Can u please tell me what i'm doing wrong? I'm quite new with programming so it would be a great help!
Thx in advance
Reply
Kevin Liew Admin 14 years ago
What you've calculated sound alright to me. But I can't really see the problem here. Do you have a staging version online?
Reply
jay tee 14 years ago
Hi, I have the exact same problem mentioned in this thread. I want to add a 6th item. I fixed the mask horizontally but the 6th item is not hidden. It stays below all other divs. Here the url to my source code:

www.taichiforinnerpeace.com/indexgrowg.html

Thanks in advance!!
Reply
Kevin Liew Admin 14 years ago
okay, based on your comment. I think it's the width of #mask, it couldn't fit all 6 items. Is your CSS look like this:


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

background-color:#eee;
}

.item {
width:16%;
height:100%;
float:left;
background-color:#ddd;
}
Reply
Rituraj 14 years ago
hi,
Thanks for great tutorial.But i can not able to do diagonally scrolling
i wrote that code, please tell me about my mistake in that code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll Diagonally</title>

<script language="javascript">

$(document).ready(function() {

$('a.panel').click(function () {

$('a.panel').removeClass('selected');
$(this).addClass('selected');

current = $(this);

$('#wrapper').scrollTo($(this).attr('href'), 800);

return false;
});

$(window).resize(function () {
resizePanel();
});

});

function resizePanel() {

width = $(window).width();
height = $(window).height();

mask_width = width * $('.item').length;

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

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

}

</script>
<style>body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;}#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;}</style>
</head>
Reply
Kevin Liew Admin 14 years ago
Please download the demo and start it from there.
Reply