Pausing and Resuming the jQuery / ASP.NET News TickerBy Scott Mitchell
|Building a News Ticket with ASP.NET and jQuery|
This series of articles walks through building a news ticker widget using ASP.NET and jQuery.
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 (
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.
<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 -
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
initTicker function to convert the unordered list
into a news ticker. (The
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
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:
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 the
startTickerfunction from the first installment and includes two new optional input parameters - startRightAway and stopOnMouseOver. You can pass in a value of
falseto 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 of
falsefor 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 to
false, the timer is started but the next headline isn't loaded until the cycle duration has passed. If a value of
trueis 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 the
advanceTickerfunction is called.
stopTicker(id)- stops the news ticker. Note that a stopped ticker does not resume upon mousing out. Calling
advanceTickeradvances the ticker but does not resume cycling. The only way to resume cycling of a stopped ticker is to call
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.aspxthat 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.aspxpage 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:
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:
ticker.js script file for the above script to
work. In the demo application these script references are located in the master page,
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.
Starting and Stopping the Ticker Based On User Action
The ticker can be started, stopped, and paused using the
advanceTickerfunction is called. A stopped ticker, however, will not resume cycling its headlines until the
startTickerfunction is called.
To demonstrate stopping and starting the ticker I added a link beneath the news ticker using the following markup:
Next, I defined a
click event handler for the
stopStartTicker link by adding the following jQuery to the
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
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
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
advanceTickerat 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:
Whenever this link is clicked we want to advance to the next headline. This is accomplished with the following
click event handler:
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!