Wednesday, April 24, 2024
HomejQueryEasy Horizontal Textual content Scroller - jQuery eocjsNewsticker

Easy Horizontal Textual content Scroller – jQuery eocjsNewsticker


A straightforward but configurable jQuery information ticker plugin which easily, horizontally, and infinitely scrolls via textual content blocks at a given pace.

Helps static textual content and JSON/JSONP information supply (by way of AJAX). Good for breaking information, inventory quotes, informational messages, and many others.

Learn how to use it:

1. To get began, embrace jQuery library and the eocjsNewsticker plugin’s recordsdata on the HTML web page.

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

2. Create a static information ticker that hundreds content material from the textual content block throughout the doc.

<div id="instance">This Is A Static Information Ticker</div>
$("#instance").eocjsNewsticker({
  // choices right here
});

3. Create a dynamic information ticker that hundreds content material from an exteral JSON file by way of AJAX.

<div id="instance"></div>
$("#instance").eocjsNewsticker({
  kind: 'ajax',
  supply: 'information.json'
});
// information.json
{
  "1": "Breaking Information 1", 
  "2": "Breaking Information 2", 
  "3": "Breaking Information 3", 
  "4": "Breaking Information 4", 
  "5": "Breaking Information 5"
}

4. Config the information ticker with the next choices.

$("#instance").eocjsNewsticker({

  // animation pace
  pace: 20,

  // time to attend earlier than beginning
  timeout: 1,

  // divider between information
  divider: '+++',

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

5. Customzie the AJAX mode.

$("#instance").eocjsNewsticker({

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

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

});

Changelog:

v0.7.0 (2022-09-26)

  • Eliminated the choice to make use of jsonp, since all trendy browser help the fetch API. If you happen to nonetheless want help for jsonp, please use model 0.6.2.

v0.6.2 (2022-07-21)

  • Slide sizes are actually checked once more instantly earlier than begin

v0.6.1 (2022-02-16)

  • Added possibility to make use of the Fetch API

v0.5.1 (2021-10-28)

v0.5.0 (2021-10-28)

  • Help for right-to-left languages

v0.4.2 (2021-07-21)

  • Permit Array in JSON supply

v0.4.1 (2021-07-15)

  • Small efficiency enhancements

2020-10-31

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

2020-09-28

2020-07-01

2020-03-25

 


This superior jQuery plugin is developed by eyeofchaos. For extra Superior Usages, please test the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments