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: January 11, 2024
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,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...