Register now or login here to start promoting your blog and your favourite articles.
Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery
14 Jul 2009 - 89 Comments
Create a content sliding website that slide vertically, horizontally or diagonally. This is one of the famous techniques used by most of the porfolio websites.
Author: kevin | Source: queness

Scroll Horizontally

Demonstration

Scroll Vertically

Demonstration

Scroll Diagonally

Demonstration

Download

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.

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>

Scroll Diagonally

<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!

Update

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

Scroll Horizontally

Demonstration

Scroll Vertically

Demonstration

Scroll Diagonally

Demonstration

Download

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

Nguyen Ngo on 13 Jul 2009 says:
You place vertical & horizontal exs in wrong file name for both
Eric on 13 Jul 2009 says:
Kevin! Nice job and examples!
Mixing this with the last tut and the possibilities are endless!
Thanks for the tuts, your site is becoming infectious!
daniele on 13 Jul 2009 says:
Nice job, but I suggest you to add some functions to window.resize() for recalculate divs width
Giampy on 13 Jul 2009 says:
Not working in IE6, see www.mostramagritte.it for horizontal and vertical scroll
Steven Mulder on 13 Jul 2009 says:
Very smooth, except you've got your directions backwards....
kevin on 13 Jul 2009 says:
@steven, nguyen: yes, it's fixed. thanks :)
@Glampy: I haven't tested it on IE unfortunately, I dont have a pc with me :(
e11world on 14 Jul 2009 says:
I can definatley see this being my next website's effect.
sturobson on 14 Jul 2009 says:
I started doing something like this for my site, www.alwaystwisted.com about four weeks ago, it's not finished but it's up for all to see. Wish this article was out earlier, would have saved a lott of stack overflow questions....Stu
TutorialFeed on 17 Jul 2009 says:
Really nice article. Thanks for sharing.

Tutorialfeed
daniele on 23 Jul 2009 says:
i don't understand how to make 2 simple thing.
1- change background for each slide ( or on the contraty put a unique big background in all the website....consider that using a 5000x20 gif is possible to obtain a wonderful changing background)
2- how to armonize the scrolling...a lot of scrolling are " elastic" and " armonic" ...this is a lot rigid and it seems to be not so useful to look , if you have to navigate a lot.
paulinho on 23 Jul 2009 says:
it don't works with object's in the .content div... the object is always visible when the wrapper is relative small, so nearly 50% or so...
kevin on 23 Jul 2009 says:
@daniele:
1. you can add different background images for different page.

<div id="item2" class="item">

using that id "item2", u can assign different bg image.

2. you can find out the easing/transition/scrolling effect here http://flesler.blogspot.com/2007/10/jqueryscrollto.html
PiotreG on 25 Jul 2009 says:
Error on page on IE 8. Any fixes to that?
PiotreG on 25 Jul 2009 says:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
Timestamp: Sat, 25 Jul 2009 08:46:42 UTC


Message: Object doesn't support this action
Line: 19
Char: 3
Code: 0
URI: xxx

Message: Object doesn't support this action
Line: 19
Char: 3
Code: 0
URI: xxx
PiotreG on 28 Jul 2009 says:
@Kevin Do you have maybe any idea how to make it work for IE 8? I would be very grateful. This would work so awesome with my site.
kevin on 28 Jul 2009 says:
@PiotreG: Hi, thanks for using this script, and really sorry for the late reply. I'm looking for a machine with IE8 installed... so far, most of my friends are using mac or IE7 :(...

Does it scroll at all? Is the CSS layout display correctly? I guess I have to buy one windows machine...
Joseph Gregory on 28 Jul 2009 says:
I have just added this to my website but it won't work on IE 6,7,8. Is there any fix
kevin on 28 Jul 2009 says:
Sorry guys, I didnt realize that it didn't work in all IE. Apparently, vertical scroll works but no the rest. The reason behind it was, it uses wrong javascript code, and also, I have posted a wrong javascript in this tutorial as well. My bad!

I have updated all the code, it all should work the way it should now. Thanks for the supports!
Joseph Gregory on 28 Jul 2009 says:
I love this script thanks so much! I was searching for days for a script like this.
The only problem I have found is when you try to resize the page in IE the content frame comes out of place. and is no longer in the middle of the page.
PiotreG on 29 Jul 2009 says:
@Kevin Thanks a lot, I will try it this week. Can't wait!
Stuart on 31 Jul 2009 says:
Great script, works really well.

run into a snag whilst play about with it, after adding 8 panels at 800% mask and12.5% being the items after the 5th items the contents loses its wrapping and by the 6th panel its lost its positioning, only happens in IE7 ?

is this due to how ie treats 100% widths?

do you have any ideas on how i can get round this, as i say it only appears in ie7 and is perfect in firefox/safari

again would like to say what a nice script this is
Denny Sugar on 31 Jul 2009 says:
Have been looking all of ovor this tut...thanks for sharing!
Tiana on 5 Aug 2009 says:
this is exactly what i've been looking for!
I have a couple of questions:
- is it possible to combine all of them for one site? e.g. about me page scrolls horizontally, portfolio scrolls vertically, contact me scrolls diagonally?
- how can i put pictures in between the scrolls...some sites that look like it's one big picture and after each click, the site looks like it's scrolling through the big scene to get to the next section...
kevin on 6 Aug 2009 says:
yes, it should scroll the direction by itself.

If you want to have a background image for each section, you can set it to the id i specified in the html, (item1, item2 and item3......). If you have a large background, you can set it to wrapper id.
Jason on 8 Aug 2009 says:
This is very impressive. Would it be possible to set this up where transitioning from one page to another didn't show the other pages in between? Here's an example of what I would like to accomplish in JQuery, only this example is in Flash

http://www.simpaticohomes.com/
Nikhil Mekala on 8 Aug 2009 says:
is it programmed not to take more than 5 items? cuz I can't.
kevin on 10 Aug 2009 says:
Hi Nikhill, it will work with any number of items. You just have to specify the correct item id.
Brian on 10 Aug 2009 says:
Hi Kevin,
Do you have an idea of how to slide two boxes at once? I would like a thin container for text and another wider container for images. Exactly like this. http://pikedesignstudio.com/new/solutions/interactive.shtml
This was done with an iFrame but would prefer the slider.
thanks,
Brian
Sam Richeson on 16 Aug 2009 says:
.mov files do not seem to display properly. .mov files will not stay hidden.
luke on 29 Aug 2009 says:
**Nice job, but I suggest you to add some functions to window.resize() for recalculate divs width**

Yes, I would love this too. This script works pretty good with my site, but when one resizes the window, everything gets messed up. Any way around this?

Thanks!
kevin on 29 Aug 2009 says:
yes, i aware of that, I will be putting the window resize function in few days time. please check back again around wed or thurs. :)
kevin on 30 Aug 2009 says:
I have updated the post. :)
it's resizable!
Emil on 9 Sep 2009 says:
Hi! Great work!
Only have 2 questions.
First, i want this scrolling window to be 500*500px, but when I change it's not centered anymore, have tried to change the other widths but can't get it to work, any tips for how i should count the right sizes?
Second, it still seems to mess up when ypu resize the window, atleast in IE. When I resize it gets back to item1 and you can't get to any other. Thanks!
Emil on 10 Sep 2009 says:
I had messed up the code somehow.. The resize works fine! Still want to know about how to change the size though :)
ron on 27 Sep 2009 says:
Hi

first thanks for the tutorial.

i have 2 problems:
1- i want the item width to be 100% of the browser width. i played with it and the mask width but i must miss something.

2- i want the item to stretch according to its content.

hope someone can help me

best regards
kevin on 27 Sep 2009 says:
Hi ron, you have to play with .content class for the width and height:

.content {
width:100%;
height:100%;
top:0;
background-color:#aaa;
position:relative;
}

should work :)
rona on 10 Oct 2009 says:
Firstly tnx for this great job , this is very nice for the nice portfolie sites but it can not work in internet explorer 8 is there any solution to solve this problem . tnx again
rona on 10 Oct 2009 says:
and how can we use this script mixed ?
kevin on 10 Oct 2009 says:
Hi rona, IE8... hmm, try to use the meta tag to force ie8 renders the page with ie7 engine:

&gt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" /&lt;
Derryl on 13 Oct 2009 says:
For some reason, when I put Lightbox on my site, the scroll effect stops working?

Specifically, the file that causes it to break is prototype.js in the Lightbox package - is there any way to reconcile this problem?

Has anybody tried combining the two with success?

Thanks!
Alexut on 14 Oct 2009 says:
is there anyway i can scroll this vertically and horizontally and diagonally in the same time ? :)
kevin on 14 Oct 2009 says:
hi Alexut, yes, its possible and very easy, what you need to do is, arrange the panel into 2x2, 3x3 or whatever you like. The scrollto plugin will do the scrolling for u
kevin on 14 Oct 2009 says:
@Derryl: I believe you can solve it by using jQuery.noConflict mode. Not sure how to use it tho, so, pls do some research on it :)
David on 19 Oct 2009 says:
hey kevin, can I make the items solid and so that they adjust to the content height. even when I drag the window to a really small size. because when I do that now the bottom piece of the items gets cut off.

I want to create this effect: http://ftdesigner.net/

Drag it smaller and see that only the background changes, everything else just gets \"hidden\". Now Im not familliar with jquery much, I mostly understand what I can touch inside the scripts and what not. I do have a modest knowledge about HTML/CSS.

I just wanted to know if I could achieve the effect on FTdesigner. Due to screen resolutions and browser sizes.

Thankyou
Wes on 5 Nov 2009 says:
Is there a way for this to exist inside a page without killing other java scripts?

For example, Im trying to use it as a banner, so when a link in the banner is clicked, the scroll occurs bringing in a new banner. All of the code in this tutorial is in its own div. That works fine, but when this is the banner of a normal page (in its own div) it kills any other java script going on like rollovers, etc. Hope that makes sense...

Please help! :D
kevin on 5 Nov 2009 says:
Wes, hmmm.. thats interesting. is your other javascript uses other javascript framework? if yes, then u can do some research on jQuery.NoConflict method.
Jeroen04 on 15 Nov 2009 says:
Hi Kevin,

First I wanna thank you for the tutorial, it is great! I was looking for stuff like this for my own website, thanks for that!

I have a problem. I want a background on the page that is static, so it wont scroll. How can I get this?

Thanks, Jeroen

(sorry for my bad english! ;-) )
kevin on 15 Nov 2009 says:
Hi Jeroen, so, you have a background image, but you want it fixed in the same position?

i think u can set it in CSS
body {background-attachment: fixed}
Jeroen04 on 16 Nov 2009 says:
Thanks for the quick reply!

I dont know if you know what I mean. I have a background and I want this instead of the light grey background. But I dont know how to do this. I have in my CSS:

body {
background-image: url(image/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}

But it wont show up. It will only work when I remove the id wrapper (but then the whole website wont work, so this is not a solution... ;-) )

I hope you can help me!
Jeroen
kevin on 17 Nov 2009 says:
i think you forgot to remove the background color for #wrapper :)
Alon on 26 Nov 2009 says:
many thanks for great post!

I have 2 questions or suggestions:
- how would you recommend incorporating a pre-next links rather than sublinks inside each item?

- how would you add mouse delta interactivity to the vertical slider?
HighHui on 30 Nov 2009 says:
hi! nice tutorial! :)

ive one q:

let say that ive 3x3 items ... its possible to make the 5th item appear first, when the page loads? ... ive found a solution but i dont like it: {mydomain}/page.html#item5 :) ... thank you
Alyosha on 1 Dec 2009 says:
I love it, and like everyone else, have a question: is it possible to enable scrollbars in the broswer window somehow, so that users can navigate through the pages \"manually\" if they wish?

Thanks for the great script!
kevin on 1 Dec 2009 says:
@Highhui, @Alyosha
hmmm.... i think you can remove overflow:hidden in #wrapper.. or set it to auto.

i dont have the chance to test it. Please let know if it works. :)
HighHui on 1 Dec 2009 says:
@kevin

found the solution to my question :)

$(document).ready(function() {
// first item you want to apear
$(#wrapper).scrollTo(#item5, 800);
...


thanks

micagrafica on 1 Dec 2009 says:
scrollbar works with your suggestion. Thanks for offering info and support
micagrafica on 2 Dec 2009 says:
http://micagrafica.com/scrolling/ I do have an issue with the background and navigation not working when I resize the browser (requires a refresh to work). It is probably an issue with me changing the height / width from percentages to set values... Anyone else experience this or know of a solution?
naru on 12 Dec 2009 says:
Very new to this so hopefully you will all excuse the obvious

I am still confused on how to put the scroll into my page . I have a header bar with the clients logo . I have read and tried every suggestion above but cannot seem to make it work. I also want to put text into the scroll area ..do I need to insert it as a gif? and if so how do I insert
www.naruphotography.net/untitled2.html

thanks
Rathin on 23 Dec 2009 says:
Great!!! I like it
micagrafica on 28 Dec 2009 says:
any idea why my bg and navigation stop working when i resize my browser window in firefox?
Nutty63 on 30 Dec 2009 says:
Great Tutorial....

How would I make the slides automated, so they change say every 15 seconds, and then back to the beginning after the last one?

Thanks
Harry on 6 Jan 2010 says:
Excellent Tutorial! How can you add easing??

Thanks!
kevin on 6 Jan 2010 says:
Hi Harry, yes, you can add it...

$('#wrapper').scrollTo($(this).attr('href'), 800, , {easing:'elasout'});


for more info, please visit:
http://demos.flesler.com/jquery/scrollTo/
Funkwarrior on 9 Jan 2010 says:
http://plugins.jquery.com/project/LocalScroll can be used too in armony with scrollTo plugin: it's great too! the hash of the clicked link will appear on the address bar once the animation ends: extend the ability to use the back and forward buttons.
Guy on 11 Jan 2010 says:
Hi Kevin -
When I add a 6th item (id=item), that item appears to cover the first item on the page... when i click on it's link there is a vertical movement downwards. What parameters do I need to adjust to make the code happy with 6 items.
Todd on 11 Jan 2010 says:
Still can't get past the 5th item. I have copy and pasted the code, and then edited it to be the 6th item, however, when I test it, the page vertically scrolls down but stops at number 5. I have named the 6th item accordingly and the code appears to match the other items (of course it is identified as number 6) but the scroll will not roll to it. Suggestions. BTW your code work is awesome.
Nutty63 on 12 Jan 2010 says:
Have the exact same problems as Todd above, just cannot seem to add a 6th item....
kevin on 12 Jan 2010 says:
Hi All, sorry for the late reply. I know the problem you're having. I think all of you have missed one important point, it's in CSS section. You need to edit the CSS - #mask id and .item class. I should have make it clearer though.

This is the calculation for vertical scroll:
#mask : width=100%, height = 100% * total of items
.item : width=100%, height = 100% / total of items

So, CSS for vertical scroll with 6 items would look like this:

#mask {
width:100%;
height:600%; /* 100% * 6 */
background-color:#eee;
}

.item {
width:100%;
height:16%; /* 100% / 6 */
float:left;
}

A little bit different for scrolling Horizontally & Diagonally but I'm sure you'll figure it out :)
#mask : height=100%, width = 100% * total of items
.item : height=100%, width = 100% / total of items

I hope this will solve the problem. :)
Nutty63 on 12 Jan 2010 says:
Hi Kevin,

The above worked for me - thanks very much....
Todd on 13 Jan 2010 says:
Worked like a charm!
Todd on 16 Jan 2010 says:
Hey Kevin, have been working with the website and my vertical scroll has stopped working, now I get this error when I upload to the server and view it:


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3)
Timestamp: Sat, 16 Jan 2010 16:09:40 UTC


Message: Object doesn't support this property or method
Line: 33
Char: 3
Code: 0

Line 33 is:

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

Suggestions? This is is IE8, if in compatibility mode it gives the same error but at line 55.

Thanks.
kevin on 16 Jan 2010 says:
Hi todd,

was it working fine before u uploaded to the server? were you using IE8?

when I was creating this tut, IE8 wasn't released yet.... hmm... try this quick fix, you can force IE8 to render it with IE7 engine..

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

i hope it works...
Todd on 17 Jan 2010 says:
Yes, it did work in IE8, because I was uploading and testing it live on the server at the time. I plugged in a javascript 1.2 effect for a particular section, then it seemed to have stopped working, so I removed the segment and it still didn't work anymore. Would that have done anything?
Todd on 17 Jan 2010 says:
tried the quickfix and it didn't help.
Todd on 19 Jan 2010 says:
Ok, how about an adjustment for adding a 7th item? Thanks.
kevin on 20 Jan 2010 says:
haha, todd, you can use this formula:

I assume you're using vertical scroll?

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

that's it...
Todd on 20 Jan 2010 says:
Thanks Kevin, I got the 7th item working, but have still lost the scroll capability. The site is www.shootprod.net/shoot.html. It worked in IE8 just fine last week. Can you look at it? Hope I am not asking too much, and thanks for your help.
kevin on 20 Jan 2010 says:
Hi Todd, it's obviously not an IE8 thingy.. because it doesn't work in my Firefox as well.

However, I read your code, apparently, you have included jQuery framework twice.. this is the line:

these two lines are from your website:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

I guess, that the problem why you website doesn't work. :)
Todd on 21 Jan 2010 says:
Nope, still same, whether I remove the second JQuery or point to the same source loacally, same problem. The says 'Line 34 character 3"? Is it saying the " ' " which is the third character in?
kevin on 21 Jan 2010 says:
hi todd, first of all, you shouldn't include the jquery framework twice, I guess it's best to remove the one at the bottom...

You can try the following debugging method:

1. if it worked locally, it should work online as well. Just have to make sure you have uploaded all the files and they are referenced correctly (correct link and path) .

2. comment out all the script and add alert('test') inside $(document).ready() to make sure jquery framework is loaded.

3. if it's loaded, try to enable the script one by one, I would recommend enable the scrolling first.

I hope that'll help...
Yash Mistrey on 1 Feb 2010 says:
Hello friend, i am also tried to do like this, but i want to know that can we scroll the background of website too ? Like this http://kamalchaneman.co.nr/
Yash Mistrey on 1 Feb 2010 says:
Hello friend, i've got it,
I have one question please, can we make horizontal & vertical sliding together. Or All scroll together ?
Geert on 2 Feb 2010 says:
@ Yash Mistrey.

How you did make the background scrolling?
kevin on 2 Feb 2010 says:
@Yash, yes you can make horizontal, vertical and diagonal scrolling altogether. You just have to reaarange your content to 4x4 or 5x5 or even higher... the scrollTo plugin will do the rest for you...

@Geert... background scrolling, not so sure how yash did it, but to make the background scrolling, actually, you need a huge background image, that's it.
yash on 2 Feb 2010 says:
Thanks for your message, actually i put bg image in #mask div, If you can explain more how to make H,V scrolling together, Please if provide demo.
yash on 2 Feb 2010 says:
Im not to smart in javascript, so if you can explain more with code on how to make h, v, scrolling together. Please... please...
Yash Mistrey on 3 Feb 2010 says:
Dear Kevin, I am very frustrated over my project, it height is not fit in different resolution. How to fit 100% in all display.
Yash Mistrey on 3 Feb 2010 says:
Dear Kevin, Here is the link of my website, http://filippoboutique.0catch.com/scroll/
i want to fit it in all display. & hope you'll reply my all above questions. Thanks with regards. Yash
Chris on 4 Feb 2010 says:
Kevin,

Thanks for the tutorial! I have been trying to use this effect on one of my sites for a while now. I have a question, what if I have a background image that is static but the mask and content seem to resize with the window. In essence I want the mask and content area to remain static and not resize, it won't line up with my background image. I tried changing some of the css for both the mask and content but it conflicts with the script.

Thanks,

Chris

Leave a comment

http://
Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons Buy and Sell Flash Buy and Sell Flash

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts


View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew

Partner

  • Web and Designers
  • CSS Style
  • PV.M Garage Blogzine - (Italian)
  • TutsValley
  • Designrfix
  • CoolVibe
  • Web Developer Juice
  • Denbagus
  • Web Hosting Secret Revealed
  • PSD to HTML Conversion
  • BlueHost