Before getting started, be sure to view the demo to see how the scroller works. Here’s what the finished project will look like:
finished
jQuery Scroller Tutorial Details
* Technologies: HTML, CSS, JavaScript, jQuery
* Difficulty: Intermediate
* Estimated Completion Time: 20-30 minutes
Intro: Preparations
You should create an empty HTML file and save it somewhere convenient now; we’ll be working with it throughout this tutorial. Because we’ll be working exclusively with client-side code, there’s no need for a server – you can preview directly on your computer. In the demo files we’ll use inline CSS and JavaScript, but you can externalize these if desired.
Tip: For this type of tutorial, it can be helpful to use jsBin or jsFiddle to follow along. These free online tools let you experiment with HTML, JavaScript and CSS without having to create any files on your computer. Best of all, you can save, version and share your experiments. It’s a great way to perfect a technique without cluttering up your computer with tons of files.
If you’re creating your own HTML file, here’s the code you should have to start:
Note the designated places for markup, CSS and JavaScript. Additionally, note that we have included jQuery 1.6.1 from Google’s CDN.
Step 1: The HTML Markup
We’ll use a dedicated
to hold the scroller. In keeping with best practices, all of the content will be placed in an unordered list (
- ), with a list item (
- ) for each separate story. By using an HTML list to define the links, we ensure that the ticker will gracefully degrade for users with JavaScript disabled, and that search engines will still be able to see and follow all of the links. Add the following HTML markup to your page:
My Story 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
More...
My Story 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
More...
My Story 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
More...
My Company's News Ticker
© 2011 My Company
We have four items: three stories, then a quick ‘about’ item with a copyright. For each of the real items, there’s a title link to the story, a description, and another “more” link to the story at the bottom. If desired, you can customize this structure once you’ve completed the project. The nice thing about the way we’re going to build this is that you can place anything within the - items – including images or any other markup.
Update the list now to contain an - for each of the features you want in the scroller.
Step 2: Styling
If you preview now, you’ll see a simple HTML list of stories complete with links. Now it’s time to make the jQuery Scrollerlook nice and take the first step towards interaction.
We’re going to explicitly specify width and height dimensions for the wrapper, then use the overflow property to make the user be able to scroll through the list of links (since there’s more content than fits within the specified size). In a minute we’ll override part of this CSS with JavaScript so that the scrolling happens automatically and no scrollbar shows, but we want the CSS default to allow for user control. This way, the scroller will still be usable even if the user has disabled JavaScript.
In the
