jQuery webticker/ news ticker plugin

There are many jQuery news ticker available today. They are also known as jQuery WebTicker or jQuery easy ticker plugins. It is a useful, tiny and handy feature as it can be used to display news, notification, tweets, recent/ popular posts or articles and many more things. Out of those many plugins, One of the popular plugin is "jQuery WebTicker". So in this post, I will show you how to use and implement this plugin to create news ticker.

Related Post:

HTML


All you need to do is to define your HTML in following format.
<ul id="webticker">
  <li>First Item</li> 
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

CSS


This plugin requires following CSS classes to be defined. You can change them as per your requirement but you need following CSS classes.
tickercontainer {
    width: 500px;
    height: 27px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.tickercontainer .mask {
    position: relative;
    top: 8px;
    height: 18px;
    overflow: hidden;
}
ul.newsticker {
    position: relative;
    font: bold 8pt Arial;
    color:black;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.newsticker li {
    float: left;
    margin: 0;
    padding-right: 15px;
}

jQuery


And to make this jQuery webticker work, all you need to do is to make a call to webTicker() function on defined HTML element. That's it.
$(document).ready(function () {
    $('#webticker').webTicker();
});
Live Demo
This plugin also provides some options to control the speed and the direction. The options name are "travelocity" and "direction". The first option controls the speed and its default value is 0.05 while the later option controls the direction and default value is 1 which is (left to right). If you want right to left then set -1.
$(document).ready(function () {
    $('#webticker').webTicker({
        travelocity: 0.05,
        direction: -1
    });
});
Official Website
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..