How to create a simple news ticker using jQuery

Very simple, easy to use news ticker created using jQuery with awesome animation effect. Adds much more effect and attraction to your website. It accommodates a lot of content in a small space. The same has been adopted by facebook to showcase the recent activity of friends. You will find the code comparatively easy to understand.

The HTML

<div id="newsticker-container">
<ul>

<li>
<div>
1) <a href="http://www.2lessons.info/2012/03/facebook-type-vertical-navigation-menu.html">Facebook type vertical navigation menu created using jQuery</a>
</div>
</li>

<li>
<div>
2) <a href="http://www.2lessons.info/2012/05/how-to-create-facebook-style-activity.html">facebook style activity notification</a>
</div>
</li>

<li>
<div>
3) <a href="http://www.2lessons.info/2011/08/facebook-style-drop-down-menu-using.html">CSS jQuery Drop Down Menus</a>
</div>
</li>  

<li>
<div>
4) <a href="http://www.2lessons.info/2012/09/facebook-style-alert-confirm-box-using.html">Facebook Style Alert Confirm Box using jQuery</a>
</div>
</li>

<li>
<div>
5) <a href="http://www.2lessons.info/2011/12/facebook-like-red-notification-simple.html">facebook like red notification created using CSS only</a>
</div>
</li>

<li>
<div>
6) <a href="http://www.2lessons.info/2012/09/how-to-create-google-like-top-bar-using.html">Google.com like top bar with drop down menu using CSS</a>
</div>
</li>

<li>
<div>
7) <a href="http://www.2lessons.info/2012/09/gmail-type-select-all-checkbox-using.html">Gmail type select all checkbox using jQuery</a>
</div>
</li>

</ul>
</div>

The Javascript

(function($){

$.fn.newsTicker = function(options) {

var defaults = {

speed: 700,

pause: 4000,

NoOfItems: 4,

isPaused: false,

height: 0

};



var options = $.extend(defaults, options);

var obj = $(this);

var maxHeight = 0;



obj.css({overflow: 'hidden', position: 'relative'})

 .children('ul').css({position: 'absolute', margin: 0, padding: 0})

 .children('li').css({margin: 0, padding: 0, cursor:'pointer'});



// Get the height if the list items

 maxHeight = obj.children('ul').children('li').height();

// Set the height of the newsticker

 obj.height(maxHeight * options.NoOfItems);



// The main function which executes the move-up animation

var interval = setInterval(function(){

  moveUp(obj, maxHeight, options);

}, options.pause);



// To activate mouse pause

 obj.bind("mouseenter",function(){

  options.isPaused = true;

 }).bind("mouseleave",function(){

  options.isPaused = false;

 });

moveUp = function(container, height, options){

if(options.isPaused)

 return;

var obj_ul = container.children('ul');

var copy_first = obj_ul.children('li:first').clone(true);

obj_ul.animate({top: '-=' + height + 'px'}, options.speed, function() {

 $(this).children('li:first').remove();

 $(this).css('top', '0px');

});

obj_ul.children('li:first').fadeOut(options.speed);

if(options.height == 0)

{

obj_ul.children('li:eq(' + options.NoOfItems + ')').hide().fadeIn(options.speed).show();

}

copy_first.appendTo(obj_ul); // Copy the first element back to the main ul object

};

};

})(jQuery);