jQuery SerialScroll is an excellent tool by Ariel Flesler that allows you to “animate any series of elements, by sequentially scrolling them.” In other words, it allows you to do stuff like create slick newsreels and slideshows on your website. I’ve created a short, comprehensive tutorial on how to create a simple, three tab scrolling list since I couldn’t find anything similar online:
Download jQuery
Download jQuery ScrollTo
Download jQuery SerialScroll
Create a new folder called “js” and load the jQuery files into it
Create a new file in your text editor and call it init.js. Insert the following text and save it to your js folder:
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
jQuery(function( $ ){
$('div#screen').serialScroll({
target:'div#sections',
items:'li',
axis:'xy',
navigation:'#navigation li a',
duration:700,
force:true,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
});
So we’ve marked four elements to look for in your website: <li>, any linked list items inside of <div id=”navigation”>, <div id=”sections”>, and <div id=”screen”>. Screen will be the wrapper for your entire scrolling element; it will contain two things: the scrolling panes, and the navigation corresponding to them. Navigation will contain your navigational elements in list form. Sections will contain the scrolling panes in list form. Each list tag will mark either: a) a navigation element, or b) a single pane corresponding to a navigation element.
In the header of your HTML, insert the following in red (note: versions of script files may have changed):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery SerialScroll Example</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll-1.2.2-min.js">
</script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js">
</script>
<script type="text/javascript" src="js/init.js"></script>
</head>
<body>
Now we have to implement the jQuery on your website. We’re going to be using elements we need to style in our CSS, so let’s go to our CSS first and insert the following:
#sections ul, #sections li, #sections h3, #sections h2, #sections h1 {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
#sections {
background-color: red;
clear: left;
min-height: 300px;
overflow: hidden;
width: 750px;
padding: 5px;
}
#sections ul {
width: 3660px;
}
#sections li {
float: left;
width: 750px;
padding: 5px;
}
#navigation {
width: 760px;
font-size: 18px;
color: #fff;
text-align: center;
}
#navigation ul, #navigation li, #navigation h3, #navigation h2,
#navigation h1, #navigation p {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
#navcontainer {
float: left;
width: 487.5px;
}
#nav1, #nav2 {
background: gray;
height: 43px;
}
#nav1 {
float: left;
}
#nav2 {
float: right;
}
#nav1 a, #nav2 a {
display: block;
width: 215px;
height: 29px;
padding: 10px 0 0;
text-decoration: none;
color: #000;
}
You can style each element to your liking, but the key is that we’re setting each successive <li> after the first outside our view, so that when we click on a tab to scroll they look to be appearing for the first time.
Next, go to the place in your website where you want to insert the SerialScroll element and paste this:
<div id="screen"> <div id="navigation"> <ul id="navcontainer"> <li id="nav1"><a href="#">Tab 1</a></li> <li id="nav2"><a href="#">Tab 2</a></li> </ul> <ul> <li id="nav2"><a href="#">Tab 3</a></li> </ul> </div> <div id="sections"> <ul> <li> <h2>Tab 1</h2> Content for Tab 1. </li> <li> <h2>Tab 2</h2> Content for Tab 2. </li> <li> <h2>Tab 3</h2> Content for Tab 3. </li> </ul> </div> </div>
That’s it! I’ve zipped a demo here for you to reference if you need help: serialscrolldemo
Hi there. I also use this awesame script from Ariel Flesler. I have a little problem with it and I couldn´t get in contact with Ariel so far. The problem is: in Firefox everthing works fine, the animation scrolls from one element to the next one. In every other major browser the animation don´t stop at the next element but rushes directly to the end of the list. I don´t know what I have to do to make all browser act like FF. You can see it in action under: http://pr.russ24.net/de/referenzen/nach_kunden/projekt/Barbour/2008/unternehmensdarstellung/744029270/
Any idea?
Hello, I found this blog article while searching for help with JavaScript. I have recently switched browsers from Opera to Mozilla Firefox 3.1. Just recently I seem to have a issue with loading JavaScript. Every time I go on a website that requires Javascript, the site freezes and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is very appreciated! Thanks