CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Vpp Man
Vpp Man

Reputation: 2546

jQuery Cycle applied to div to scroll its contents in a loop

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

Upvotes: 1

Views: 2166

Answers (2)

kayen
kayen

Reputation: 4868

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/

Upvotes: 0

GillesC
GillesC

Reputation: 10874

Cycle is the wrong plugin to use for this as it only display one image at the time, it doesn't do sliding effects which is what you seem to want. Try jCarousel it's quite popular and easy to use (many examples and good doc)

http://sorgalla.com/projects/jcarousel/

In general rules if there isn't a demo close to what you want to achieve there is big chance that the plugin won't work as expected.

Upvotes: 1

Related Questions