JonMifsud
Web Developer & Consultant

jQuery WebTickerjQuery

01 May 2011

Having released an intial version of my jQuery webTicker and after getting so much success and downloads I have decided to upgrade the ticker and fix some bugs. The latest update to version 2 includes support for RSS & dynamic updates.

Current Version: 2.1.0
Repository: Github
Requirement: jQuery 1.4.2 / 1.5 or above (note that 1.4.4 is buggy and does not provide good visual performance )
Direct Download: jQuery Web Ticker v2.1.0 (script only)

Below you can find an example of the Web Ticker plugin

  • My First News Item
  • My Second News Item
  • My Third News Item
  • My Fourth News Item
  • My Fifth News Item
  • My Sixth News Item
  • My Seventh News Item
  • My Eighth News Item
  • My Ninth News Item
  • My Tenth News Item

Using the Plugin:

              jQuery('#webticker').webTicker()
//where webTicker is the id of the container you would like the ticker to run upon

            

CSS Requirements:

              .tickercontainer
//width of the original container in which the ticker appears
.tickercontainer .mask
//can be used to achieve padding within the container
ul.newsticker {
    //important to enable css3 transitions properly 
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    list-style:none;
    margin:0;
}

            

HTML basics:

              <ul id="webticker">
    <li>My First News Item</li> 
    <li>My Second News Item</li>
    <li>My Third News Item</li>
</ul>

            

Download the webTicker Package From Github.

Download the sample CSS styling.

If there are any issues with the use of the above JQuery plugin please let me know, via a contact form or using github itself; its use should be quite straight forward.

Select the item you would like to run the ticker on and just run the WebTicker function with its options. Below there is the list of default options, you only need to re-define the ones you would like to change. Note that these are breaking changes from the 1.3 version so some changes to your webticker script on the website might be required.

              $("selector").webTicker({
    speed: 50, //pixels per second
    direction: "left", //if to move left or right
    moving: true, //weather to start the ticker in a moving or static position
    startEmpty: true, //weather to start with an empty or pre-filled ticker
    duplicate: false, //if there is less items then visible on the ticker you can duplicate the items to make it continuous
    rssurl: false, //only set if you want to get data from rss
    rssfrequency: 0, //the frequency of updates in minutes. 0 means do not refresh
    updatetype: "reset" //how the update would occur options are "reset" or "swap"
}); 

            

The settings are optional and speed should be a reflection of the pixels moved per second, whilst direction should be either left or right according to the direction you would like the webTicker to move. The Plugin automatically selects all children nodes, enqueues them and moves them to the end of the queue as soon as the go out of the div in question to ensure seamless transition from first to last object. Further information can be found in the documentation and example provided with the package.

CSS3 Transitions

As of version 2.1.0 the jQuery Web Ticker now supports CSS3 Transitions; making everything work smoother. Should the user not have CSS3 Transitions available; the plugin will fallback to jQuery animate as it used to work before.

Licence

As of version 2, the Licence has been changed from completely open source to a donation-ware variant. For personal use the WebTicker plugin still remains free, however for commercial applications I would appreciate a donation reflecting the effort that has gone into this plugin and the time it saves you from creating your own versions. The donation is not obligatory however appreciated, any money received will be re-invested into the project to provide a better experience. Donations could be conducted using the PayPal button below.

PS. all styling is done via CSS so please ensure that if there are errors on visibility the CSS is modified to get the desired results.

For those who are more fluent in Spanish you can visit this page to read the translation provided by Maria Ramos.