A jQuery news ticker / text slider plug-in: simpleTicker.js with 3 Demos

Creating news ticker/text slider in web pages

The simpleTicker.js is a jQuery based simple plug-in for creating the ticker or text sliding with different patterns.

The supported patterns are fade, roll, and slide that you may set by using the JavaScript options.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

Setting up the jquery.simpleTicker.js plugin

All you need is to get the jquery.simpleTicker.js file from the downloaded package and include its reference with the jQuery library.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script src=”js/simpleTicker/jquery.simpleTicker.js”></script>

The markup is pretty simple:

Where the ID is referred for initiating the plug-in and the ticker class contains the style of the div containing the sliding text or ticker.

Initiate the plug-in:

$.simpleTicker($(“#news-ticker-fade-demo”),{‘effectType’:’fade’});

See the demos below with different values for effect type and other options.

A demo of fade effect ticker

By using the effectType option in jQuery code, you may specify the pattern of the ticker. In this demo, the fade value is used while you may also set the speed or delay etc.

jQuery ticker fade

See online demo and code

The markup:

 

The jQuery:

 

The CSS for styling the div:

 

A demo of roll effect with speed option

The roll option is set for the ticker along with delay. If you have long text for a news item then this option can be useful. It will pause the current item with the specified time. For this demo, I have used 2 seconds i.e. 2000 milliseconds.

jQuery ticker roll

See online demo and code

The jQuery code:

An example of sliding text with speed and delay

You may create the news ticker or text slider by using the slide value for the effectType option. See this example where I used the delay and speed as well:

jQuery ticker slide

See online demo and code

The code:

 

For learning more about this simple yet useful plug-in, visit the developer’s page.