jQuery News Ticker with Responsive Layout

Category: Others | December 7, 2019
jQuery News Ticker with Responsive Layout
Author: eyeofchaos
Official Page: Go to Website
Last Update:December 7, 2019
License:MIT

Learn how to build jQuery News Ticker with a responsive layout by using the eocNewsticke plugin. It is a simple and lightweight plugin that comes with clean design.

It allows you to generate the horizontal breaking news bar that moves from the right to the left side. You can also list out the latest post or news with animation and make them keep moving.

Such news ticks help you to showcase very important information as user land on your website. Its quite helpful for the users and you can show them important notice.

With the help of CSS and by modifying its js file you can easily customize it. Furthermore, you can customize it by using its available options.

Moreover, you can control scrolling speed, timeout and add divider, etc.

How to Use jQuery Responsive News Ticker

Load the jQuery and eocNewsticker‘s CSS and JavaScript file into your HTML document to create news ticker.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link el="stylesheet" href="css/eocnewsticker.css">
<script src="js/eocnewsticker.js"></script>

After that, we will create a div element with a unique id that contains your news/posts links or simple text. In our case, we have a myNews ID.

<div id="myNews">The quick brown fox jumps over the lazy dog</div>

Finally, initialize the plugin in jQuery document ready function to an active news ticker.

$(document).ready(function() {
  $("#myNews").eocNewsticker();
});

Advanced Configuration Options for News Ticker

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

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

$("#myNews").eocNewsticker({
   speed: 20,
});
timeoutIt defines the waiting time after that news ticker should start scrolling. Default: 2, Type: Number.

$("#myNews").eocNewsticker({
    timeout: 2,
});
dividerThis is useful to separate text/links of posts/news. Default: ‘+++’, Type: String.

$("#myNews").eocNewsticker({
   divider: "|",
});

You May Also Like

Leave a Comment

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