FF2+ IE9+ Chrome

Pausing up-down Scroller

Author: Dynamic Drive

Note (Dec 21 16'): Script completely rewritten for various improvements.

Description: As its name suggests, this is a up-down scroller that pauses between each message!  Responsive and supporting of percentage widths, the scroller uses CSS3 animations for buttery smooth, mobile optimized animations (with fallback for IE9 browsers). Pause/resume and update the scroller contents on demand. With no JavaScript library dependencies, this is one lean mean scroller script!

Demo:


Directions Developer's View

Step 1: Insert the below code in the <head> section of your page:

Select All

The code references two external files, which you should by default upload to the same directory as where the scroller page resides:

Step 2: Then, inside the BODY section of your page, to display a scroller, simply use the below example code:

Select All

The code of Step 2 illustrates how to display a pausing scroller on your page. First, define an empty DIV where you wish the scroller to be housed:

<div id="pscroller1" class="pausescroller">
</div>

The CSS class should always be set to pausescroller. Then following this DIV, initialize the scroller by calling the new pausescroller() constructor function:

<script type="text/javascript">
//new pausescroller(message_array, CSS_ID, pause_in_ms, slideeffect_in_ms)
var scroller1 = new pausescroller(pausecontent, "pscroller1", 2000, 1500)
</script>

The function should be passed the following parameters:

  • message_array: The name of the JavaScript array of messages to show. Inside the code of Step 1 we've defined two sample message arrays.
  • CSS_ID: The ID of the DIV that will show this scroller instance.
  • pause_in_ms: The pause between message changes, in milliseconds.
  • slideeffect_in_ms: The duration of the slide up effect, in milliseconds.

When invoking new pausescroller(), assign it to an arbitrary but unique variable to access its methods later, in the above case, variable "scroller1".

Pausing Scroller methods

method Description
scrollerinstance.pause() Pauses the scroller.
scrollerinstance.resume() Resumes playing the scroller.
scrollerinstance.populate(array) Re-populates the scroller with the contents defined inside the JavaScript array entered.