Shares

jQuery – Easy ticker Plugin Updated ← jQuery Plugins

- 48,135 views - 24 Comments

jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot of features and works in all browsers.

Download Live Demo Fork on Github

jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot 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.
  • Highly customizable.
  • Light-weight (4 Kb – Full source / 2.7 Kb – Minified source).

WordPress plugin

This plugin is used in Super RSS Reader – WordPress plugin to ticker the RSS feeds present in the sidebar. You can try this WordPress plugin in your WordPress site.

Demo

Click the button below to view the example and demonstrations of jQuery easy ticker plugin.

Download

jQuery easy ticker source is hosted in Github. Use the link below to download the entire package.

Documentation

Basic Usage

  • Include jquery.js and jquery.easy-ticker.js files to the page
  • Attach the plugin to the elements needed with the easyTicker function.

Example

HTML

<div class="ticker1">
	<div class="innerWrap">
		<div class="list"> List 1 </div>
		<div class="list"> List 2 </div>
		<div class="list"> List 3 </div>
		<div class="list"> List 4 </div>
	</div>
</div>

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

jQuery code

$('.ticker1, .ticker2').easyTicker({
	direction: 'up',
	easing: 'swing',
	speed: 'slow',
	interval: 2000,
	height: 'auto',
	visible: 0,
	mousePause: 1,
	controls: {
		up: '',
		down: '',
		toggle: '',
		playText: 'Play',
		stopText: 'Stop'
	}
});

Available properties

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.

Donate and Support with PayPal

If you find my products useful, then just donate and support my work. It will be an encouragement !

$
  • Jean Michael

    Love the plugin – but when I run on iPad, I have to click somewhere on the page before it begins rotating. Tried firing a click() but it wants me to click it still. Clues?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      The timer is activated only when the window is active. A bug occurs when you move to other tab. So, the timer is activated only when the current window is activated.

    • Jeremy

      To add to Aakash’s comment (which didn’t really include an answer to your question), observe that his code checks the “data-focus” attribute in the body element. So, to get it running when your page loads, simply do this to your : and you should be golden (though I’m sure that 5 months later you’ve moved on).

      • Jeremy

        Uuhm, stripping html? Unable to edit reply? lol… Lemme try again: add >data-focus=1< to your body tag.

  • Psaibhushan

    Hi,
     I really like the plugin…But in the demo5 you have in demo,I want the default to be pause…..Can you please help me out???

  • Rudolf Horbas

    jquery.easy-ticker.min.js (downloaded today) appears not to be working, jquery.easy-ticker.js does!

    • zizther

       I think it is something to do with the compression. Get the uncompressed version and compress it yourself to get around this.

  • MJ

    I’m new to wordpress and plugin options. I tried having this plugin installed through the zip file but wordpress gave me an error saying it wasn’t a plugin. I’ve looked through the documentation and at the comments but I’m not understanding how to “attach” this item  to the super rss reader. Can you provide me with detailed installation instructions?

    • http://www.facebook.com/people/Aaron-George/100000147951634 Aaron George

      I am also having the same problem

  • noucamp84

    how to create run once

  • zizther

    This is great, Thanks!

  • covidercom

    Hi. I m using the plugin and i m refreshing the html in the list thru Ajax call.After the list is loaded it does not scroll. Any idea??

  • Jaifahr

    Good plugin, but a semi-colon miss in the minified version.

  • Gerald

    Hi,
    I get the following error on my page (IE9, FF): Message: Unable to set value of the property ‘puff’: object is null or undefined
    Any idea?

  • Caspar

    Hi there, I like this plugin. It feels a lot more modern and capable than a lot of news tickers out there but I’m not sure I can use it on my site as: I need the up and down controls but when I use them, the scrolling continues, so they sort of ‘fight’ with the default scrolling. Is there any way to get them to pause? Pausing temporarily to a configurable time would be amazing. If you could do this soon I could use it and would definitely donate.

    • http://www.facebook.com/caspar.shelley Caspar Shelley

      Hi Aakash, thanks very much again for taking the time to write the plugin then giving it away to all of us. I have hacked your plugin to disable the controls while the move function is working (until the animate callback). That has stopped the strange jumping around that was happening before. Let me know if you want to see it.

  • Pingback: 9 Best jQuery News Ticker

  • Pingback: jQuery For Web Design » Jquery Easy ticker

  • Pingback: jQuery For Web Design » Jquery Easy ticker

  • Peter van Schaik

    can you show a complete code example for using UP and DOWN buttons.
    Thanks!

  • mvprsir

    not downloading

  • Pingback: さまざまなアニメ効果付きのニュースティッカー「Easy Ticker」 - jQueryプラグイン - jQueryプラグインまとめのカルマ

  • Pingback: Super RSS Reader | WP Plugin Directory

  • Pingback: SharePoint List Driven News Ticker | Dave Cavins