Smooth Horizontal Text Scroller - jQuery eocjsNewsticker

Smooth Horizontal Text Scroller - jQuery eocjsNewsticker
File Size: 5.87 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An easy yet configurable jQuery news ticker plugin which smoothly, horizontally, and infinitely scrolls through text blocks at a given speed.

Supports static text and JSON/JSONP data source (via AJAX). Perfect for breaking news, stock quotes, informational messages, etc.

How to use it:

1. To get started, include jQuery library and the eocjsNewsticker plugin's files on the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="eocjs-newsticker.js"></script>
<link rel="stylesheet" href="eocjs-newsticker.css" />

2. Create a static news ticker that loads content from the text block within the document.

<div id="example">This Is A Static News Ticker</div>
$("#example").eocjsNewsticker({
  // options here
});

3. Create a dynamic news ticker that loads content from an exteral JSON file via AJAX.

<div id="example"></div>
$("#example").eocjsNewsticker({
  type: 'ajax',
  source: 'data.json'
});
// data.json
{
  "1": "Breaking News 1", 
  "2": "Breaking News 2", 
  "3": "Breaking News 3", 
  "4": "Breaking News 4", 
  "5": "Breaking News 5"
}

4. Config the news ticker with the following options.

$("#example").eocjsNewsticker({

  // animation speed
  speed: 20,

  // time to wait before starting
  timeout: 1,

  // divider between news
  divider: '+++',

  // or 'ajax'
  type: 'static'
  
});

5. Customzie the AJAX mode.

$("#example").eocjsNewsticker({

  // data source
  source: '',
  
  // or 'jsonp'
  dataType: 'json',
  
  // used for jsonp
  callback: 'callback', 
  
  polling interval of the ajax source (seconds)
  interval: 120 

});

This awesome jQuery plugin is developed by eyeofchaos. For more Advanced Usages, please check the demo page or visit the official website.