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

Written by Kevin Liew on 14 Jul 2009 •
708,136 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

yan 14 years ago

Thanks, dude but can i ask why if i used .php i doesn't slide ? so if i click 5. in url show localhost/xxx/index.php/#item5. did something wrong with version php?

Kevin Liew Admin 14 years ago

It shouldn't affect it. Open your firebug console and check if there any javascript error.

jackson 14 years ago

Is there any method to enabled it by using mouse change the content

Kevin Liew Admin 14 years ago

hmm, sorry, no.

dresmine 14 years ago

Hello, How i can put fixed menu? I mean one menu showing on all pages.

Mark 14 years ago

If you use PHP (or have the ability to), you can php_include the menu in all the divs. Otherwise, you'll have to copy-paste the menu as many times as needed.

Abhishek 14 years ago

create a div with position fixed before div id wrapper and add your menu or content in it

matt 14 years ago

i put it in a div tag before the wrapper, but it just disapears

Glorb 14 years ago

I had the same problem and found a solution. You have to play with z-index and absolute position :

#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
z-index: 0;
}
#navigation {
width:200;
height:50;
position:absolute;
top:0;left:0;
background-color:#fff;
z-index: 1;
}

Amjito 14 years ago

Thank you so much for this! I have used your methodologies and developed my own with the latest features on jQuery...

Luka 14 years ago

hello,
i've got a vertical scroll on my website, the problem is that when i want to have 10 items on it just can't fit, despite that i've put mask height on 1000% for 10 items and etc...everything seems fine,but it's not working? thanks for your help

dave 14 years ago

Hi Kevin, can I control the scroll speed?

Kevin Liew Admin 14 years ago

Yes, line 14 in the javascript above.

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

You can change 800 to something else. 800 is milliseconds.

raposa 14 years ago

Hello! Thank you so much for this tutorial, I have a question tho. I'm a bit new to this so it might be a rookie's mistake. I'm trying to use the diagonal layout with a grid of 2x3 in which all divs have content. All apears to be well and working but whenever I navigate to any of the divs they float to the left of the screen without any margin, except for the ones that are most to the right which apear just fine. Any idea why this happens?

Thank you

Kevin Liew Admin 14 years ago

I assume the scrolling is working, but just the content inside each panel isn't? That could be just a CSS layout issue. Can you upload it online so I can have a look?

raposa 14 years ago

Thanks for the reply. Yes the scrolling was working but the margins weren't. I got it to work by adding {margin:true} in the function, tho in your example you didn't need it. :S Here's the code if you still want to take a look at it: http://dl.dropbox.com/u/13233577/test.html

Kevin Liew Admin 14 years ago

Thanks.... I viewed source... i wouldn't recommend to use UL for layout... it's isn't semantic at all. That could be the reason why it's not center. Use DIV instead for layout, UL is meant for Nav and list.

Brandon 14 years ago

Hi Kevin I am having the same problem as Marty with the jump to page and resize issue here is my code

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

$('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);

}

also one last question

What would this change to if i wanted a 5 by 5 diagonal

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

.item {
width:20%;
height:100%;
float:left;
}

Kevin Liew Admin 14 years ago

Do you mean you can't see the scroll effect?

monica 14 years ago

This is what i searching for!
But i have some question, i don't have javascript program and my teacher wants me to make it just with css and html. Can it be? Can you tell me how?

I really need your help for my assignment and i just familiar with basic code, because my basic is not programming. thank you very much! :)

Kevin Liew Admin 14 years ago

I dont think it's possible to do with just CSS and HTML.. probably not now.

manjunath 14 years ago

Hi, it's a great tutorial
but i have an issue,some piece of elements of other page appears at the bottom after page slide..
i tried using OVERFLOW:hidden but my page is long so i need to scroll it..help me

Kevin Liew Admin 14 years ago

It looks like a layout issue to me, do you have complicated styling inside the panel?

Junaid 14 years ago

hi I'm having trouble with the scrollTo plugin I got it working before but had some layout problems so i started from scratch and now it wont scrollTo only snap to the anchor. Can you please advise where I'm going wrong? Otherwise when I had it working it was great, and you guide really helped. Thank you http://sekhu.net/charlie/index.php

Kevin Liew Admin 14 years ago

erm... are you sure you sending me the right link?

Junaid 14 years ago

hi sorry I was messing around with different plugins , but yes same link I've restored it back to what it was. As you can see the content goes to the different links but it snaps rather than scrolls. Thanks

Kevin Liew Admin 14 years ago

This the error msg i got from the console:
$("#wrapper").scrollTo is not a function

I think you include too many version of jquery and scrollto plugin.

Junaid 14 years ago

hi thank you that was it - cheers pal!

Kevin Liew Admin 14 years ago

Awesome :)

Junaid 14 years ago

Sorry can you help me with the maths a little I assumed that 15 panels would = 1500% for the mask, and therefore 1.33% for the item, however, when I do this, the panels sit below each other instead of side by side. Is there anyway around this without going vertical or diagonal? I just want to go horizontally. Thanks

Junaid 14 years ago

right - so I read it wrong :P I realise now it was meant to be 100% / panels which equals 12.5% for the width of the item, but it seems to make no difference? My layout is still wonky :( Though it finally scrolls.

Kevin Liew Admin 14 years ago

I had a look at your website.. it seems fine? I guess you have fixed it yourself before I reply to your comment :p

Kristopher Amari 14 years ago

Hey Kevin,

The code is great, thanks a lot for putting it out there. I'm currently implemeting this in my Portfolio site.
I am using a 3x3 grid with 4 divs that hold content, this was my old positons:
(content)(blank)(blank)
(blank)(content)(blank)
(content)(blank)(content)

This layout worked absolutely perfectly, with the page laoding right on the upper ;eft content div but then I had to remove a page so I mixed up the layout a bit to make it more interesting and now this is what it looks like:
(blank)(content)(blank)
(blank)(blank)(blank)
(content)(blank)(content)

So now my starting div is in the upper center row instead of the upper left, and figured with the scrollTo on page load addition to the javascript this would be an easy fix, but it just doesnt seem to be working, no matter what it load to a blank page, in effect the current upper left div, and wotn load to the upper center div.

If you could take a quick look and let me know it you see something?

Thanks again!

-Kris

http://kristophersamari.com/index.html

Kevin Liew Admin 14 years ago

I have a section in the tutorial called: Jump to Certain Item on Page Load
You can try that.

Kristopher Amari 14 years ago

Kevin,

My issue is that I did implement that code, but it still wont scroll to that div on load.

Kristopher Amari 14 years ago

Im sorry but I changed my code back to place my starting item in the upper left hand corner. Everythign else works fine.

Daan 14 years ago

This is working so well, thanks! Just one question... I'd like the default page to be the second item, but I can't seem to get this to work.

Previous 1 2...272829...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