Pausing and Resuming the jQuery / ASP.NET News Ticker
By Scott Mitchell
Introduction
Many websites display a news ticker of one sort or another. A news ticker is a user interface element that displays a subset of a list of items, cycling through them one at a time after a set interval. In December 2010 I wrote an article titled Use jQuery and ASP.NET to Build a News Ticker that explored how to create your own news ticker widget using jQuery and ASP.NET. The news ticker's content is defined as an unordered list (
<ul>
) where each list item (<li>
) represents a news headline.
Once the ticker's content is defined, having it cycle through the head lines is as simple as calling the JavaScript function
startTicker(id, numberToShow, duration)
, which begins cycling the headlines in the unordered list with the specified id,
showing numberToShow headlines at a time and cycling to the next headline every duration number of milliseconds.
This installment shows how to enhance the news ticker to enable pausing and resuming. With these enhancements, the ticker can be configured to automatically pause rotating its headlines when the user mouses over it, and to resume rotating them once the user mouses out. Similarly, with a bit of additional markup and script you can add pause and play buttons to a ticker, allowing a user to start and stop the ticker by clicking an image or button. Read on to learn more!
Note: If you have not yet read the inaugural article, Use jQuery and ASP.NET to Build a News Ticker, please do so before continuing on...
An Overview On Using the Timer Control
The news ticker rotates through a series of headlines that are defined in the markup of the page using an unordered list (
<ul>
); each
headline is defined as a list item (<li>
) in the unordered list and can contain any HTML, including text, images, and links. The following markup
shows an example of the markup you would use to define the headlines.
<div class="ticker threeRows medium">
|
Each <li>
element represents a headline and can have any HTML you like. In the above example I have three <div>
elements in
each headline with different CSS classes - header
, body
, and footer
- for formatting the headline's header, body, and footer text.
You could add images or replace the <div>
s with just text. And while not shown in the sample above, you can certainly add hyperlinks to the
markup in the <li>
elements.
To display the unordered list as a news ticker, we need to call a particular JavaScript function when the page first loads in the browser. In the initial article -
Use jQuery and ASP.NET to Build a News Ticker we called a JavaScript function named startTicker
.
However, I have refactored the JavaScript and added some new methods. With these changes, you'll call the initTicker
function to convert the unordered list
into a news ticker. (The initTicker
function and the other JavaScript changes I made are detailed in the next section, New JavaScript Functions.)
For example, to turn the unordered list from above into a news ticker we'd call the initTicker
function when the page loads, passing in the id
of the unordered list, the number of headlines to show at a time, and the duration (in milliseconds) to wait before cycling to the next headline. The following script
initializes the above unordered list (latestNews3
), showing three headlines at a time:
<script type="text/javascript">
|
New JavaScript Functions
The original news ticker code presented in Use jQuery and ASP.NET to Build a News Ticker offered two JavaScript functions:
startTicker(id, numberToShow, duration)
- call this function when the page loads to convert an unordered list into a news ticker.rotateTicker(id)
- this function is automatically invoked every duration number of milliseconds and is responsible for fading out the first list item, removing it from the unordered list, and then adding it to the bottom of the list. You would not call this function directly.
initTicker(id, numberToShow, duration, startRightAway, stopOnMouseOver)
- call this function when the page loads to convert an unordered list into a news ticker. This function now takes over the responsibilities of thestartTicker
function from the first installment and includes two new optional input parameters - startRightAway and stopOnMouseOver. You can pass in a value offalse
to startRightAway if you want the ticker to not start cycling its headlines on page load. This is useful if you want to require the user to perform some action in order to start the ticker. By default, the ticker's rotating headlines are paused when the user mouses over the ticker and resumed when the user mouses out. To override this behavior - that is, to cycle headlines regardless of whether the user mouses over the ticker - pass in a value offalse
for the stopOnMouseOver parameter.startTicker(id, advanceToNextHeadline)
- starts the news ticker (if it is not already running). The advanceToNextHeadline parameter is option. If it is omitted or set tofalse
, the timer is started but the next headline isn't loaded until the cycle duration has passed. If a value oftrue
is passed in for this parameter then the time is started and the next headline is immediately loaded.pauseTicker(id)
- pauses the news ticker. A paused news ticker will resume if the user mouses over and then out of the ticker or if theadvanceTicker
function is called.stopTicker(id)
- stops the news ticker. Note that a stopped ticker does not resume upon mousing out. CallingadvanceTicker
advances the ticker but does not resume cycling. The only way to resume cycling of a stopped ticker is to callstartTicker
.advanceTicker(id)
- loads the next headline for display. When the news ticker is running, this function is automatically called each time the specified duration has passed. This function can also be called based on a user action to preemptively move to the next headline.
StartStopTicker.aspx
that demonstrates using the new pause and resume functionality.
On this demo you'll find two news tickers: one that displays a short textual headline and shows only one headline at a time, and a second one that displays a more
detailed headline and shows three at a time. The remainder of this article examines the two tickers in this demo.
Starting the Ticker On Page Load and Stopping / Starting the Ticker When Mousing Over and Out of the Ticker
The first ticker in the
StartStopTicker.aspx
page displays one headline at a time and starts cycling through the headlines as soon as the page loads.
Moreover, when a user mouses over the ticker the headline cycling stops until the user mouses out of the ticker.
This particular ticker's content is defined in the the following (abbreviated) markup:
<div class="ticker stretched">
|
With this markup and nothing else, all six list items would be displayed as a bulleted list and there would be no cycling through the headlines over time.
To have it display just one headline and to have a new one cycled in every five seconds, say, we call the initTicker
function in the
$(document).ready
event handler:
<script type="text/javascript">
|
Note: In addition to the above JavaScript, you'll also need to reference the jQuery library and ticker.js
script file for the above script to
work. In the demo application these script references are located in the master page, Site.master
.
The initTicker
function also accepts two additional input parameters - startRightAway and stopOnMouseOver. If these are omitted (as in the
example above) they default to a value of true
, meaning that the ticker is started immediately and is paused when the user mouses over it. Note that we
could have explicitly specified a true value for these two parameters like so: initTicker('#latestNews1', 1, 5000, true, true)
.
With the above markup and script in place, visiting the page displays the unordered list as a single line, showing the first list item as the headline.

After five seconds, the first headline fades out and the second one appears.

Moving your mouse over the ticker stops the headlines from cycling; mousing out resumes the headline cycling. (Technically, mousing over the timer clears the JavaScript timer that is used to advance to the next headline every specified number of milliseconds; mousing out recreates that timer.)
Starting and Stopping the Ticker Based On User Action
The ticker can be started, stopped, and paused using the
startTicker
, stopTicker
, and pauseTicker
JavaScript functions. The
difference between a stopped and a paused ticker is that a paused ticker will resume cycling its headlines if the user moves her mouse over the ticker and then back out
or if the advanceTicker
function is called. A stopped ticker, however, will not resume cycling its headlines until the startTicker
function
is called.
To demonstrate stopping and starting the ticker I added a link beneath the news ticker using the following markup:
<a href="#" id="stopStartTicker">Stop Ticker</a>
|
Next, I defined a click
event handler for the stopStartTicker
link by adding the following jQuery to the $(document).ready
event
handler:
$("#stopStartTicker").click(function () {
|
The above script executes whenever the link is clicked. It first checks to see if the link's text is "Stop Ticker", in which case it stops the ticker by
calling stopTicker
and changes the link's text to "Start Ticker". If the link's text is something else (namely, "Start Ticker") then it starts the ticker
by calling startTicker
and chances the link's text back to "Stop Ticker".
Once you click "Stop Ticker" the ticker's headlines stop cycling until the ticker is restarted.
Preemptively Advancing to the Next Headline
If the ticker is running the headlines are cycled every specified number of milliseconds. Behind the scenes, a JavaScript timer is used and calls the
advanceTicker
at each "tick." You can also call this function yourself if you want to preemptively load the next headline (or if you want to move to the next headline of a stopped
ticker).
To demonstrate calling the advanceTicker
function, let's add another link next to the Stop/Start Ticker link that, when clicked, will display the next
headline in the ticker. Here is the markup for this link:
<a href="#" id="nextNewsItem">Next News Item >></a>
|
Whenever this link is clicked we want to advance to the next headline. This is accomplished with the following click
event handler:
$("#nextNewsItem").click(function () {
|
If the ticker is running and waiting for the next headline to load, clicking the "Next News Items >>" link preemptively loads the next headline. If the ticker is stopped, clicking the link loads the next headline (leaving the ticker in its stopped state).
Conclusion and Looking Forward...
At this point we have updated the news ticker to include the ability to start, stop, and pause the ticker, as well as to offer built-in functionality to pause and resume the ticker when mousing over and out of the ticker. There is much more we could add to the ticker, though. For beginners, it would be nice to be able to customize the configuration further, such as replacing the existing fade out effect with an alternate one. Also, right now all of the headlines must be statically defined in the page's markup (the
<li>
items in the <ul>
). It would be nice to be able to load these headlines via Ajax - that is,
to have the headlines pulled asynchronously from the server. These features, among others, will be explored in future articles in this series.
Until then... Happy Programming!
Attachments:
Further Reading