Simon Hibbard's Web Apps Blog

jQuery vScroll – Simple animated vertical content scroller supporting varying heights


This plugin turns a container with sub containers into a scrolling window with previous and next buttons, the content can be anything and the heights of these can vary as needed. The plugin is very small (minified version just over 500 bytes).

A demo of this being used on a live site I developed can be found here where it is used to scroll the news content: http://waterwell.co.uk/news.aspx

To use it simply create a container element and a previous and next button (these can be any html elements), then apply this plugin to the container element specifiying the height you want the container to be.

All sub containers will become scrollable elements which can be accessed via the previous and next buttons.
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/vscroll/demo/

How-to:

1) Basic example html markup, 2 buttons and a container with sub containers:

<input type=”button” value=”Prev” id=”prevButton” />
<input type=”button” value=”Next” id=”nextButton” />

<div style=”height:400px” id=”demo2″>

<div>some content</div>

<div>some more content</div>

<div>some other content</div>

<div>

2) Include the jQuery files (I use Google CDN for jQuery) and apply the plugin to the container:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8221; type=”text/javascript”></script>

<script src="js/jquery.vscroll-1.2.0.min.js" type="text/javascript"></script>

<script type=”text/javascript”>
$().ready(function () {
$(‘#demo2’).vScroll({ speed: 500, height: 300, upID: “#prevButton-demo2”, downID: “#nextButton-demo2”, cycle: true });
});

</script>

Plugin can be downloaded from here:

http://plugins.jquery.com/content/vscroll-120

Plugin options:

speed – how fast the scroll animation is (default = 500)

height – height of the container element (you must include this from V1.2.0 onwards otherwise the container will default to 300px)

upID – id of the element used to trigger the up animation (default = #up-arrow)

downID – id of the element used to trigger the down animation (default = #bottom-arrow)

cycle – Whether or not to scroll back to the first item if the next button is clicked on the last item (default = true)

Advertisements

12 responses

  1. Jason

    Hi Simon,
    Is there a way to set this scroller to “Auto” so that the items slide up say every 5 seconds? Please let me know i’m loving the plugin thus far.

    Thanks,
    Jason

    November 19, 2010 at 8:15 pm

  2. Jason

    Anyone know the answer to the auto scroll question? It’s kind of urgent.

    Thanks,
    Jason

    November 22, 2010 at 3:08 pm

    • shibbard

      Hi Jason. This could be done but then opens up some other issues. What happens when it reaches the last post, should it stop or cycle – cycle involves a lot of work to add. Also the next/prev buttons would need to interupt it, and/or it should pause on hover.

      So there would be things to think through when adding this. Unless it just scrolls until the end for now.

      Thanks for the feedback.

      Simon

      November 22, 2010 at 4:09 pm

  3. Invalid under Internet Explorer 7.

    December 1, 2010 at 11:23 am

  4. Rajesh Pant

    In safari resize the window it is not working properly.

    January 13, 2011 at 5:41 am

  5. Nikita

    Hi! I have some problems with creating multiple vScrolls on the same page. Can u help me?

    January 16, 2011 at 3:20 pm

  6. Nikita

    Sorry, I’ve found decision of my problem.

    January 16, 2011 at 5:25 pm

  7. Pingback: jQuery vScroll v1.2.0 released – multiple instance support + cycle feature « HibboBlog

  8. bey

    very important thnak’s for your tired

    February 25, 2011 at 1:21 pm

  9. Pingback: jQuery vScroll v1.2.0 released – multiple instance support + cycle feature

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s