jQuery – Easy ticker plugin

Easy ticker is a jQuery plugin to add news ticker like vertical scroll effect to lists. It is highly customizable and flexible with lots of features and works in all browsers.

Features

• Two directions available (Up and down).
• Can be targeted on any template.
• Flexible API for extending to various applications.
• Supports ‘easing’ functions.
• Mouse pause feature available.
• The speed of the transition can be changed.
• Controls can be added in order to Play/pause or move the list up and down.
• Cross browser support.
• Light weight (2.72 Kb – minified).

Getting started

Usage

Include jquery.js and jquery.easy-ticker.js files to the page

<script src="jquery.js"></script>
<script src="jquery.easy-ticker.min.js"></script>

HTML

<div class="myWrapper">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
</div>

or

<div class="myWrapper">
    <div>
        <div>List item 1</div>
        <div>List item 2</div>
        <div>List item 3</div>
        <div>List item 4</div>
    </div>
</div>

jQuery

$(document).ready(function(){
    
    $('.myWrapper').easyTicker({
        direction: 'up',
        easing: 'swing',
        speed: 'slow',
        interval: 2000,
        height: 'auto',
        visible: 0,
        mousePause: true,
        controls: {
            up: '',
            down: '',
            toggle: '',
            playText: 'Play',
            stopText: 'Stop'
        },
        callbacks: {
            before: false,
            after: false
        }
    });

});

Options

direction

This property determines the direction of movement of the list. Values: up & down. Default: up

easing

The easing property allows to add some easing effects to the transition using the easing function available from the Easing plugin. Just download and include the plugin in the page and give the required easing function name as value. Default: ‘swing’. Check out the demo to get an example.

speed

This property determines the speed of transition. Values: slow, medium, fast or any value in milliseconds.

interval

The time for the next transition to take place. Values: time in milliseconds. Default: 2000 (2 seconds delay for next transition)

height

The height of the element can be controlled by this property. If the height is set to auto, the height is automatically determined to fit the list. Exact values like 200px or 300px can also be set. Default: auto.

visible

The number of visible elements of the list can be set to this property. Values: 0 (display all) or any specific count like 1, 2, 3 etc. Default: 0

mousePause

The timer can be stopped when the mouse rolls over the element. Values: 0 – Disable mouse pause & 1 – Enable mouse pause. Default: 1

controls

The controls property is used to assign the elements which control the transition. The value is an object with the following properties.

• up – The element to do a “Up” transition. Value: any element selector
• down – The element to do a “Down” transition. Value: any element selector
• toggle – The element to “Play/Pause” the transition. Value: any element selector. Note: A class named et-run is added to the “toggle” element when the transition is in on-state
• playText – The text of the toggle button, when the ticker is running.
• stopText – The text of the toggle button, when the ticker is stopped.