When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, February 2, 2011

Pausing and Resuming the jQuery / ASP.NET News Ticker

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

  • Getting Started - this innagural article walks through building a simple news ticker using ASP.NET and jQuery.
  • Pausing and Resuming - this article shows how to enhance the client-side script to allow users to interactively pause and resume the news ticker.
  • 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...

    - continued -

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


    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.
    I've since refactored these two functions and added three additional ones. There are now a total of five functions:
    • 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.
    The demo available for download at the end of this article includes a page named 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">
       <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.

    On page load, the first headline is displayed.

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

    After five seconds the second headline replaces the first.

    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 () {
       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


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


    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!

  • By Scott Mitchell


    Attachments:

  • Download the Demo Code Used in this Article

    Further Reading

  • Use jQuery and ASP.NET to Build a News Ticker


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article