Learning jQuery

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:

• 6 Best jQuery Vertical & Horizontal News Ticker Plugins
• 6 Best jQuery Notification Plugins
• Top 10 jQuery Popup window plugins

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();
});

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
    });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.