jQuery Tutorial: Building a jQuery Scroller

If you’re working on a site where a number of important stories or features need to be showcased within a small area, a news scroller is a great option.

Without taking up much page real estate, you can highlight several stories along with descriptions and links to view the details. The scrolling effect helps attract and hold user interest. In this tutorial, I’ll guide you through the easy process of creating this type of news scroller with jQuery. We’ll start with an HTML list of stories that’s styled using CSS, then use jQuery to make it automatically scroll. When the user hovers over the jQuery Scroller, it will pause so they can read the abstract and click the link if they’re interested.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

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:

<!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 News Scroller</title>
  <style type="text/css">
  /* CSS will go here */

  </style>
</head>

<body>

  <!-- Markup will go here -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script type="text/javascript">
  // JavaScript will go here

  </script>
</body>
</html>

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 <div> to hold the scroller. In keeping with best practices, all of the content will be placed in an unordered list (<ul>), with a list item (<li>) 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:

<div class="newsScroller" id="newsScroll">
    <ul>
        <li>
            <a class="title" href="#">My Story 1</a>
            <span class="desc">
                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.
            </span>
            <a class="link" href="#">More...</a>
        </li>
        <li>
            <a class="title" href="#">My Story 2</a>
            <span class="desc">
                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.
            </span>
            <a class="link" href="#">More...</a>
        </li>
        <li>
            <a class="title" href="#">My Story 3</a>
            <span class="desc">
                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.
            </span>
            <a class="link" href="#">More...</a>
        </li>
        <li>
            <a class="title" href="#">My Company's News Ticker</a>
            <span class="desc">
                &copy; 2011 My Company
            </span>
        </li>
    </ul>
</div>

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 <li> items – including images or any other markup.

Update the list now to contain an <li> 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 <div>, 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 <style> tag in the <head>, add the following CSS:

.newsScroller {
    height: 120px;
    width: 260px;
    overflow-x: hidden;
    overflow-y: scroll;
    font: 10px/15px Verdana,Arial,sans-serif;
    color: #333;
    border: 1px solid #999;
}
.newsScroller ul {
    margin: 0;
    padding: 4px;
}
.newsScroller li {
    list-style-type: none;
    margin: 0 0 16px 0;
    padding: 0;
}
.newsScroller a.title {
    display: block;
    font-weight: bold;
    text-transform:uppercase;
    text-decoration: none;
}
.newsScroller a.title, .newsScroller a.title:visited, .newsScroller a.title:hover {
    color: #F90;
}
.newsScroller a.title:hover
{
    text-decoration: underline;
}

First, we add the dimensions and scrollbar to the jQuery Scroller, along with some basic font styling and a border. Next, we reset the margins and padding for the HTML list and its items, also disabling the default list bullets. We end up with a block of items that have some spacing around all of them and between each of them. Finally, we add some basic styling to each of the links. You can customize this styling as desired.

If you preview now, you’ll see something remarkably similar to the finished product:

This is what anyone with JavaScript disabled will see. Even though it’s not optimal, it’s still fully functional – which is what we were aiming for. This approach represents the best practice of progressive enhancement; the content is always usable, but the more advanced a user’s browsing environment is, the more functionality they’ll receive.

Step 3: Making It Work

Now we’re ready to add the jQuery-enhanced JavaScript to make the jQuery Scroller work automatically. I’ll show you the overall chunk first, then break down what each portion is doing.

Add the following chunk of JavaScript to the <script> tag at the bottom of the page:

$(function()
{
    $('#newsScroll').each(function()
    {
        var scroller = $(this);
        var list = scroller.children('ul');

        var listH = list.height();
        var scrollerH = scroller.height();
        list.css({
            marginTop: scrollerH,
            marginBottom: scrollerH
        });
        scroller.css({
            overflow: 'hidden'
        });

        var isOver = false;
        scroller.bind('mouseenter mouseleave', function(e) {
            isOver = (e.type == 'mouseenter');
        });

        var scroll = 0;
        setInterval(function()
        {
            if (isOver) return;
            scroll++;
            var newTop = scroll % (listH + scrollerH);
            scroller.scrollTop(newTop);
        }, 30);

    });
});

If you preview now, you should see the working jQuery Scrollerthat scrolls through all of your feature items. If you hover over the scroller, it will pause; if you move your mouse away again, it will continue. Now, let’s break down what all of that code is doing.

Breaking Down the JavaScript – Overview

In plain English, here’s what the JavaScript is doing:

Everything is wrapped in a document-ready trigger, so it will be called once the document is ready for manipulation
We locate the news jQuery Scroller and its content
We measure the wrapper and the contents so we know how far to scroll
We override the default CSS with the appropriate styles to make auto-scrolling work properly
We create a listener for mouse interaction with the jQuery Scroller
We start the auto-scroller timer

Breaking Down the JavaScript – Details

Now, lets take an in-depth look at what each of these pieces of code is doing.

Note that we use the #newsScroll selector to locate the scroller. If you had multiple scrollers in your page, you could change this to div.newsScroller instead, since we applied a class of newsScroller to our jQuery Scroller.

Chunk 1 – Finding the content

var scroller = $(this);
var list = this.children('ul');

In this first chunk, we create a jQuery reference to the current scroller. Then, we locate the actual list (the content that will be scrolled).

Chunk 2 – Making measurements, Updating CSS styles

var listH = list.height();
var scrollerH = scroller.height();
list.css({
    marginTop: scrollerH,
    marginBottom: scrollerH
});
scroller.css({
    overflow: 'hidden'
});

In this next major chunk, we first measure the list’s height and the scroller’s height. These measurements are needed so that we can then apply extra space to each end (via margin-top and margin-bottom), and later know how much scrolling is needed. Without adding the extra space, the scrolling would have a disturbing “jump” when first starting and then when looping. Here’s a diagram explaining what we want:

We start at the Initial State. The content chunk scrolls vertically for [content height] + [visible box height] pixels, until we reach the End State, then immediately resets to the Initial State again. The end result is that there’s a short empty space on each loop, letting the user know that the scroller is looping.

Finally in the chunk, we remove the default scrollbars by overriding the overflow property that was set earlier via a CSS rule.

Chunk 3 – Detecting user interaction

var isOver = false;
scroller.bind('mouseenter mouseleave', function(e) {
    isOver = (e.type == 'mouseenter');
});

Because we want the jQuery Scroller to pause when the user hovers over it, we need to add a mouseenter listener. Correspondingly, we also need to add a mouseleave listener for un-pausing it. In this chunk, we create a variable to track whether the user is over the scroller, then add a compound listener that updates that variable whenever there’s interaction. By using a single listener for both events and looking at the event.type property, we create code that’s more compact, efficient and readable. The isOver flag will be used in the next chunk to control pausing.

Chunk 4 – Starting the auto-scrolling

var scroll = 0;
setInterval(function()
{
    if (isOver) return;
    scroll++;
    var newTop = scroll % (listH + scrollerH);
    scroller.scrollTop(newTop);
}, 30);

First, we create a tracker for the scrolling position. Then, we start an interval that calls a scroll function every 30 milliseconds. To reduce the speed of the jQuery Scroller, this value should be increased; to speed it up, this value should be decreased. In the scroll function, we immediately exit if the user is currently hovering over the scroller. This makes the scroller pause when hovered-over. Otherwise, we first increment the scroll position tracker. Then, we use the modulus operator (%) to calculate the new appropriate scroll position. Finally, we apply that new scroll position. In calculating the scroll position, note that we loop after reaching [height of list] + [height of content], as described earlier and shown in the diagram.

Summary

You’ve now created a simple news jQuery Scroller to display featured story snippets on your site. The scroller features cross-browser compatibility, progressive enhancement, and automatically pauses and resumes based on user interaction. To enhance the scroller, you could start adding images and other content to the snippets, or use a server-side script (like PHP) to dynamically output the snippets and links. There are numerous possibilities! Moreover, you’ve learned about how jQuery’s document querying and manipulation methods can be leveraged to quickly and easily create nifty, useful widgets for your page. Have fun with your new knowledge!

[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]

Author : Nathan Rohler

[exec]the_author_description();[/exec]

Nathan Rohler

Nathan Rohler, who works as the lead developer for DWUser.com, is passionate about creating beautiful and moving web experiences. DWUser.com offers software tools for developers and designers, including an easy and free jQuery slider builder, EasyRotator.

11 Comments

Newest

Oldest Most Voted

Inline Feedbacks

View all comments

arturo

12 years ago

Great tuto, but if i want to place the js function in js file, how i call the function in my html file?
thank u

Stavr0z

How to remove empty space at the end of loop. I am getting long pause at the end of scroll till the first one starts again.

I have the same question how to minimize this empty space at the end of the loop ? Seems to bad bih empty space..

hm uhh ?

wisai

I am searching for this kind of script. I got my point from this post.
Thanks.

Jesse

Thanks for this.
I would have liked to see a better explanation of how this:
var newTop = scroll % (listH + scrollerH);
resets the scroller to the beginning.

As far as I can tell, the modulo operator returns the remainder of division, and when scroll becomes equal to listH + scrollerH, the remainder is 1. (a number divided by itself).

Seeyou

Many thanks – didn’t use the code, but the concept and technique helped me achieve what I was looking for!

Attila Siposs

A bunch of thanks!
You helped me a lot Nathan.

Mark Willam

13 years ago

Its really a helpful tutorial.
Thank you so much for sharing..

Sithu

Reply to Mark Willam

My question is will my web page load time gets slower as i am using scroller option.. Instead can i use pagination option..

Waqas

Thanks for sharing nice tutorial.

Please help

flyer

Great post, It is very useful . Keep writing for us.

12 Brand New jQuery techniques

[…] jQuery News Scroller In this tutorial you will learn how to build a practical news scroller with jQuery. When the user […]

curly braces

Hi, Nathan

Great, great tutorial. jsBin is a delight to use, too.

Hypothetically, if we wanted to have different size margins for the top and and bottom of the scroller (understanding that it would “jump”) how would we accomplish that? Would we create a new variable and then target it with a key/value pair in the list.css() object?

Thanks,
Sergi