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.
$("#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,
});
|
Similar Code Snippets:
Create Scratch Card using JavaScript & HTML5 Canvas
jQuery Water Ripple Effect on Click & Hover
jQuery Circular Progress Bar with Percentage
Horizontal News Scroller HTML Code
jQuery Question Answer Plugin - jQuery Quiz
HTML Visitor Counter Source Code
Make Table Columns Resizable with jQuery
jQuery Plugin to Show Toast Notification - jToast
Bootstrap List/Grid View Switcher with jQuery
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.