A simple jquery based ticker

This is a fairly simple and straight forward tutorial. The focus of this post is to share a simple method to create a ticker. There are many real life scenerios where you need tickers, e.g. on a news website to show the latest news. Now, keep in mind that this tutorial is not about real time event handling (though i am planning to write a tutorial on that as well). In this post, i'll simply cover a piece of code through which you can get all the data from server and then show it in the form of a automatic carousel (ticker). So, let's start with the code.

var initTicker = function(wrapperDiv, dataDiv, elementHeight, elementsToBeShown){

    $.get('getFeeds.php', function(data) {
        $('#'+dataDiv).html(data);
        var outerDiv = $('<div id="outerDiv"></div>').hide();       
        outerDiv.css({

                      'width': $("#activites").width(), 

                      'height': elementHeight*elementsToBeShown + 10,

                      'overflow': 'hidden'

                    });
        outerDiv.append($("#"+dataDiv));
        outerDiv.show();
        $("#"+wrapperDiv).append(outerDiv);         
        setInterval( function () { moveItUp(dataDiv, elementHeight) }, 7000); 

  });

}

In the above code, the data is basically provided from getFeeds.php.
wrapperDiv contains the id of the div which contains the div in which data is to be displayed. (A better approach is to create this wrapper div at run time and place the div in which data is to be shown inside the wrapper... for the sake of simplicity i am not including that code here)
dataDiv contains the id of the div in which data is to be shown
elementHeight height of one news element (again this can be determined through a simple javascript)
elementsToBeShown number of elements that you want to show on screen at a time.
 
a simple HTML snippet is

<div id="wrapper">

      <div id="activities">

      </div>

</div>

Now, before i move forward, let me just quickly explain what the above js code is doing. For explanation, i am gonna be using the divs shown in shown html snippet. A step by step explanation is:

1. Get the data from server and place the data in "activities"
2. Create a div at run time and set its width equal to the width of "activities" since we want the ticker to move vertically. Set the height of the div equal to the elementHeight*elementsToBeShown. Add some padding on the height side to get a smooth effect.. Set the overflow to hidden. Now, i'll get back to this point that why do we need the "overflow" property to be hidden.
3. Place the "activities" div inside "outerDiv"
4. Initiate the function which is supposed to apply the carousel/ticker style. Set the timer value according to your need. In the above code, the ticker will move the feeds every 7 seconds.

Now, let's quickly see what is moveItUp() is doing.

var moveItUp = function(dataDiv, elementHeight){
     var reduceMargin = '-='+elementHeight;

     $("#"+dataDiv).animate({'margin-top': reduceMargin}, 2000); 

}

Ok, this is only a two liner function. The above function is simply decreasing the "margin-top" property of "activities" div (which contains the data) by elementHeight. Now, why elementHeight and what purpose is served by decreasing "margin-top"?? The above function will successfully, move the data one element at a time. If you want to move 2 elements up, simply set reduceMargin to "-="+(2*elementHeight). Now, coming to the second part of question. If you remember, in the initialize code of "outerDiv", i mentioned to set "overflow" property to hidden. If you set "overflow" property to "hidden" of a div (or any element) then you'll see only the data which can fit in the mentioned height and width. So, for example, if a div's height and width are set to 500px, and you place data which requires 800px of height, then you'll only see 500px worth of data and rest will be clipped, there won't be any scrollbar as well. (for those who don't remember overflow property, a quick link http://www.w3schools.com/cssref/pr_pos_overflow.asp). So, in the initialization code, we set the height of the outerDiv to elementHeight*numberOfElements, and "activities" (dataDiv) contains all the data, but since "activities" is inside outerDiv, therefore, only that number of elements are shown on the screen that we passed to initTicker function, rest are clipped (not shown). Now, when we decrease the "margin-top" of "activities" div, it basically moves the data inside div vertically, but since, outerDiv can only contain "numberOfElements" elements on the screen at a time, the next elements in the "activities" div show up and the elements at top disappear. Using the jquery function "animate" we give the margin-top reduction step some nice animation and hence you get an effect of ticker/carousel.