Pausing and Resuming the jQuery / ASP.NET News Ticker

Introduction

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

<div class="ticker threeRows medium">    <ul id="latestNews3">       <li>          <div class="header">Politician schedules news conference</div>          <div class="body">Politician Joe Smith has assembled a news conference for this afternoon to apologize for some          indiscretion he had. This is Mr. Smith's third such "apology press conference" this year.</div>          <div class="footer">Published @ 8:30 AM</div>       </li>             <li>          <div class="header">Study links unhealthy food to unhealthy people</div>          <div class="body">A recent study by some doctors somewhere showed a strong correlation between unhealthy eating          and unhealthy people. More studies are to be performed to verify these findings.</div>          <div class="footer">Published @ 9:00 AM</div>       </li>       ...    </ul> </div>

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">    $(document).ready(function() {       initTicker('#latestNews3', 3, 5000);    }); </script>

New 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 the startTicker function from the first installment and includes two new optional input parameters - startRightAway and stopOnMouseOver. You can pass in a value of false 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 of false 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 to false, the timer is started but the next headline isn't loaded until the cycle duration has passed. If a value of true 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 the advanceTicker function is called.
• stopTicker(id) - stops the news ticker. Note that a stopped ticker does not resume upon mousing out. Calling advanceTicker advances the ticker but does not resume cycling. The only way to resume cycling of a stopped ticker is to call startTicker.
• 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.

Starting the Ticker On Page Load and Stopping / Starting the Ticker When Mousing Over and Out of the Ticker

This particular ticker's content is defined in the the following (abbreviated) markup:

<div class="ticker stretched">    <ul id="latestNews1">       <li>          <div class="body">Politician Joe Smith has assembled a news conference for this afternoon to apologize for some          indiscretion he had. This is Mr. Smith's third such "apology press conference" this year.</div>       </li>       <li>          <div class="body">Did you know that you can play the fun (and addictive!) board game          Axis & Allies online? Head on over to <a target="_blank" href="http://gamesbyemail.com/Games/WW2">http://gamesbyemail.com/Games/WW2</a>          and give it a whirl!</div>       </li>       ...    </ul> </div>

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">    $(document).ready(function() {       initTicker('#latestNews1', 1, 5000);    }); </script>

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

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 () {    if ($(this).text() == "Stop Ticker") {       stopTicker("#latestNews1");       $(this).text("Start Ticker");    }    else {       startTicker("#latestNews1", true);       $(this).text("Stop Ticker");    } });

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

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 &gt;&gt;</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 () {    advanceTicker("#latestNews1"); });

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...

Until then... Happy Programming!