Smooth Horizontal Text Scroller - jQuery eocjsNewsticker

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.

See Also:

• 10 Best News Ticker Plugins In jQuery And Pure JavaScript/CSS

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: '',
  
  // use fetch instead of $.ajax()
  fetch: false',
  
  // used for jsonp
  callback: 'callback', 
  
  // polling interval of the ajax source (seconds)
  interval: 120,

  // direction (ltr or rtl)
  'direction':  'ltr'

});

Changelog:

v0.7.3 (2024-03-18)

• Add custom parameter to force JSON file to update

v0.7.2 (2023-08-13)

• Accept node collection as target (start multiple newstickers with the same settings)

v0.7.1 (2023-03-10)

• Small CSS changes
• JS update

v0.7.0 (2022-09-26)

• Removed the option to use jsonp, since all modern browser support the fetch API. If you still need support for jsonp, please use version 0.6.2.

v0.6.2 (2022-07-21)

• Slide sizes are now checked again immediately before start

v0.6.1 (2022-02-16)

• Added option to use the Fetch API

v0.5.1 (2021-10-28)

• Minor fixes

v0.5.0 (2021-10-28)

• Support for right-to-left languages

v0.4.2 (2021-07-21)

• Allow Array in JSON source

v0.4.1 (2021-07-15)

• Small performance improvements

2020-10-31

• Update eocjs-newsticker.css
• Update eocjs-newsticker.js

2020-09-28

• JS & CSS Update

2020-07-01

• JS Update

2020-03-25

• Small Improvements

 

---

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