Question

I have elements like this

<div id="screen">
  <div class="post">Post1......etc</div>
  <div class="post">Post2......etc</div>
  <div class="post">Post3......etc</div>
  <div class="post">Post4......etc</div>
  <div class="post">Post5......etc</div>
  <div class="post">Post6......etc</div>
  <div class="post">Post7......etc</div>
  <div class="post">Post8......etc</div>
  <div class="post">Post9......etc</div>
  <div class="post">Post10.....etc</div>
</div>

But in screen box, size is limited to show only 5 elements. So at first Post1 to Post5 will be displayed. Rest is overflow hidden. At a interval of 2 seconds next element should show by scrolling up. That is after 2 seconds this contents of screen will scroll up 1 item. Now it will show Post2 to Post6. And this continues every 2 seconds like a loop. After Post10, Post1 should show up then Post2 and so.

I donot know how to do this. I read documentation of jQuery cycle: http://jquery.malsup.com/cycle/

But i didnot how to do this. This effect is like a news scroller.

Please help

Answer 1

jCarousel is a nifty plugin for displaying tickers! But you’ll need a bit of skinning to get it displayed as per your requirements.

To use jCarousel to get your scroller running, you’ll have to make a little modification on your current HTML structure.

I have replaced the DIV type structure with an unordered list.

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li>Post1......etc</li>
    <li>Post2......etc</li>
    <li>Post3......etc</li>
    <li>Post4......etc</li>
    <li>Post5......etc</li>
    <li>Post6......etc</li>
    <li>Post7......etc</li>
    <li>Post8......etc</li>
    <li>Post9......etc</li>
</ul>

To run this plugin at its very basic, you’ll need to add the jCarousel script and a CSS theme to your page (I’ve used jCarousel’s Tango theme).

Here’s how you use the plugin:

$(document).ready(function(){
    $('#mycarousel').jcarousel({
        vertical: true,    //Display a vertical carousel
        auto: 2,    //Scroll up automatically after every 2 seconds
        scroll: 1,    //No. of items to scroll up
        visible: 5,    //No. of visible items
        wrap: 'last'    //Go back to the 1st items after you've scrolled down to the last item
    });
});

You will need to modify the CSS for the plugin to display it as per your need though.

Here’s a fiddle I created using jCarousel: http://jsfiddle.net/kayen/VFdL8/