New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Pausing up-down Scroller

Author: Dynamic Drive

Note: Updated March 16th, 06'. Fixed padding issue so right padding is correctly applied to the scroller.

Description: As its name suggests, this is a up-down scroller that pauses between each message! The look of the scroller is completely styled using external CSS, including the dimensions. Easily create a single line scroller just by adjusting the scroller's height appropriately!

Demo:


Directions Developer's View

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

Select All

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 invoke a scroller instance:

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)

Where "pausecontent" is the name of the array defined earlier that contains your scroller messages, and "pscroller1", an arbitrary but unique CSS ID for that scroller. "someclass" is simply an random CSS classname you can pass to add additional style to the scroller, and "3000" points to the pause time between messages, in milliseconds.

As mentioned, all styling to the scroller is simply done via external CSS, such as:

#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

To display a single lined scroller like in the 2nd example above for example, you'd simply change the "height" property to a small number such as 25px.

Pause then scroll- that's the way to do it!