jQuery News Ticker Horizontal Bar with AJAX Support

The eocNewsticker is a well designed, cross-browser and multi functional jQuery news ticker horizontal scrolling plugin. The plugin support AJAX to fetch news from same domain or third party domain. It comes with multiple options to show your website’s news feed with animated news ticker.

You can control news ticker scrolling speed, load interval and add custom separator. Moreover, you can fully customize news bar with additional CSS.

Plugin Overview

Plugin: eocNewsticker
Author: Dieter Schmitt
Licence: MIT Licence
Published: August 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.2.4 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6.41 KB

How to Use jQuery News Ticker Horizontal Bar

1. First of all load the jQuery JavaScript library and eocNewsticker‘s CSS and JS file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- eocNewsticker CSS-->
<link rel="stylesheet" href="css/eoc-newsticker.css">

<!-- eocNewsticker JS -->
<script src="js/eoc-newsticker.js"></script>

2. Now create a div element with a unique id and put your news text (or any HTML element) in it.

<div id="breaking-news">Some example news text. </div>

3. Finally, initialize the Newsticker plugin in jQuery document ready function.

$(document).ready(function(){

   $("#breaking-news").eocNewsticker();

});

Advance Configuration Options for eoc Horizontal News ticker

The following are some advance configuration options to create / customize “eocNewsticker”.

Option Description, Default, Type
type

Define the type of news. Default: ‘static’, Type: String.

Available Option: static | ajax.

$("#breaking-news").eocNewsticker({
   type: 'static',  
});
speed

This option define the moving/scrolling speed (per 1000px) in seconds of news ticker. Default: 20, Type: Number.

$("#breaking-news").eocNewsticker({
   speed: 20,
});
timeout

It define the waiting time after that news ticker should start scrolling. Default: 2, Type: Number.

$("#breaking-news").eocNewsticker({
    timeout: 2,
});
divider

This is useful to seprate text/links of posts/news. Default: ‘+++’, Type: String.

$("#breaking-news").eocNewsticker({
   divider: "|",
});
source

Define the AJAX URL source of news. Default: ”, Type: String.

$("#breaking-news").eocNewsticker({
   source: 'path/to/file.php',
});
dataType

Define the data type of the expected file (json or jsonp). Default: ‘json’, Type: String.

$("#breaking-news").eocNewsticker({
   dataType: 'json',
});
interval

The polling interval of the ajax source in seconds. Defaut: 120, Type: Number.

$("#breaking-news").eocNewsticker({
   interval: 120,
});