jQuery vScroll

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://www.mywebdeveloperblog.com/Projects/vscroll/demo/

With and without VScroll

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” 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-121

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)

  • http://softwaresup.blogspot.com/ Carmen Lizzy
  • Mike

    Hey Simon,

    I did try creating the file with notepad, but to no avail. I checked the Script panel in Firebug and it’s displaying all sorts of odd characters. Is there a place I can download the entire plugin example?

    Thanks for the help on this.

  • Mike

    This is exactly what I’m looking for, however whenever I try to implement it, I keep getting the following errors:

    Error: illegal character
    Source File: file:js/carousel.js
    Line: 1
    Source Code:
    ⡦畮捴楯渠⠤⤠笠癡爠癳捲潬汩搠㴠〻․⹦渮癓捲潬氠㴠晵湣瑩潮

    Error: $(“#demo2”).vScroll is not a function
    Source File: vscroll.html
    Line: 13

    Any ideas? I’ve even tried copy and pasting your demo version exactly and am still getting these errors.

    • http://www.tpddesign.co.uk Simon

      Hi Mike,

      First thing is carousel.js is causing a problem – which will mean other scripts will not work properly.

      Error: illegal character
      Source File: file:js/carousel.js

      Can you remove that from the page or fix that problem then we can tell if vScroll is working as it should.

      regards,

      Simon.

      • Mike

        Yeah, I was actually trying a different plugin that I didn’t suit my needs and just pasted the vscroll code over-top the old code. I renamed the file to vscroll.js to avoid confusion. It’s still giving me the illegal character and I have no idea why. I’ve tried both the full script and minified version and get the same error. It’s really weird.

        • http://www.tpddesign.co.uk Simon

          It looks like the file you are copying into has some hidden characters in it.

          Best thing to do would be to use the actual vScroll files, or try and copy the code into a completely new file.

          • Mike

            I tried creating new files and using the original source files and still get the same error. So then I just pasted the plugin code into the head of my document and it started working. But if I try linking to a .js file, it doesn’t work. I have no idea what is going on.

          • http://www.tpddesign.co.uk Simon

            Hi Mike,

            Somehow you are certainly getting odd characters being inserted into the file.

            Have you tried just creating the .js file using notepad or something to make sure your editor is not inserting the characters?

            Still if you are using the original files in the zip download there should not be a problem.

            regards,

            Simon.