Dynamic Drive DHTML Scripts- Pausing up-down Scroller

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

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

Select All
<link rel="stylesheet" href="pausingscroller.css" /> <style> /* Demo CSS for Pausing Scrollers */ #pscroller1{ width: 100%; max-width: 400px; height: 100px; border: 1px solid black; background-color: lightyellow; margin-bottom: 1em; } #pscroller1 > div.innerDiv{ padding: 8px; } #pscroller2{ width: 100%; max-width: 350px; height: 35px; border: 1px solid black; } #pscroller2 > div.innerDiv{ padding: 4px; } #pscroller2 a{ text-decoration: none; } </style> <script type="text/javascript"> /*Example message arrays for the two demo scrollers*/ var pausecontent=new Array() pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!' pausecontent[1]='<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br />Free, original JavaScript and CSS codes to instantly add interactive features to your site!' pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.' var pausecontent2=new Array() pausecontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>' pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>' pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>' </script> <script type="text/javascript" src="pausingscroller.js"> /*********************************************** * Pausing up-down scroller- (c) Dynamic Drive (www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ </script>

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:

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.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post