jonmifsud blog & portfolio

jQuery WebTicker

25 June 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. Please not that there still might be some issues whilst compatibility with IE6 is not guaranteed as it is untested.

Current Version: 1.3
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 v1.3 (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

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.

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 do .webTicker({travelocity: speed, direction: dir}) settings are optional and speed should be in the domain of 0-1, whilst direction should be 1 or -1 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

The ticker is free to use under the GPLv3 licence. It would be appreciated if a comment/email is left with information on where the ticker is being used. Back-links would also be greatly appriciated.

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.

 


Comments

  1. Pingback: WP-webTicker | jonmifsud

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>