Lab page - jQuery Smooth Div Scroll 1.2 BETA

Back to the main page

Lab page - jQuery Smooth Div Scroll 1.2 BETA

Displays when callbacks are triggered

Jump to element first element | last element | element number (ordinal) | element id | start element

Scroll to element first element | last element | element number (ordinal) | element id | start element

Auto scrolling Start autoscroll | Stop autoscroll | Auto scrolling step | Auto scrolling interval

Set auto scrolling direction endlessloopright | endlessloopleft | right | left | backandforth

Plugin state Enabled | Hide | Restore original elements | Start at element id | Destroy (when you destroy the plugin you have to reload the page to get it back)

Hot spot scrolling Enabled | Show hot spot backgrounds | Hide hot spot backgrounds

Easing after hot spot scrolling Enabled | Easing distance after hot spot scrolling | Easing duration after hot spot scrolling

Mousewheel scrolling Enabled | Mousewheel scroling step

Easing after mousewheel scrolling Enabled | Distance is the same as the scrolling step | Easing duration after mousewheel scrolling

Ajax content Add demo html content first | Add demo html content last | Replace content with demo html content
Add Flickr content first | Add Flickr content last | Replace content with Flickr content
Restore original elements

This page is highly experimental. Don't use this code for any kind of production environment!

New stuff!

This is a working(?) beta of Smooth Div Scroll (1.2). In this version many new features are introduced and some parts of the architecture has been simplified. The major new features compared to version 1.1 are:

Mousewheel scrolling! You can now scroll using the mousewheel. Optional of course. To get the mousewheel events I use the jQuery Mousewheel plugin from Brandon Aaron.
Easing! After you have scrolled with the hot spots or the mousewheel, you can get a nice easing effect that makes the scrolling appearance even smoother. The easing methods are the ones found in jQuery UI Effects.
Scroll to a certain element! Before you could only jump to a certain element. Now you can choose if you want to scroll or jump. The methods have also been improved so you can use element id's to determine which element to scroll to. Of course the "scroll to element" has easing as well.
Load images from Flickr RSS feed! Now you can load images from a Flickr feed via JSON. Before you could only load chunks of ready HTML. The function automatically loads images of a size that fills out the scroller height (up to 1024 pixels) so you don't need to worry about the image sizes.

New architecture

In the architecture, the biggest change is that you no longer manually need to add all the elements that Smooth Div Scroll needs - this is taken care of by the plugin. All you do now is add a div and inside this div you place the elements that you want to make scrollable. When Smooth Div Scroll is initialized, the necessary elements for scrolling are added by the plugin itself. This gives you a cleaner base HTML code. On this page, the HTML code for the scroller looks like this:


<div id="makeMeScrollable">
   <img src="images/demo/field.jpg" alt="Demo image" width="497" height="330" id="field" />
   <img src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" id="gnome" />
   <img src="images/demo/pencils.jpg" alt="Demo image" width="496" height="330" id="pencils" />
   <img src="images/demo/golf.jpg" alt="Demo image" width="366" height="330" id="golf" />
   <img src="images/demo/river.jpg" alt="Demo image" width="496" height="330" id="river" />
   <img src="images/demo/train.jpg" alt="Demo image" width="440" height="330" id="train" />
   <img src="images/demo/leaf.jpg" alt="Demo image" width="496" height="330" id="leaf" />
   <img src="images/demo/dog.jpg" alt="Demo image" width="497" height="330" id="dog" />
</div>

New methods and callbacks

A lot of the methods from Smooth Div Scroll 1.1 have been changed. For example, the method moveToElement is gone and has been replaced by jumpToElement and scrollToElement. The oposite is true for addContent and replaceContent. These two methods are now combined in the new method changeContent and now you use parameters to tell Smooth Div Scroll where to fetch the new content, which type of content it is and what to do with it. There are some new callbacks - for example when you add new content to the scroller.

I won't document all methods and callbacks now - that will be a part of the first real release.

More stuff?

I'm also thinking about the following features but I'm not sure they will be implemented in this release:

Providing callbacks for events that has to do with the content inside the scrollable area. For example, when an element is exactly in the middle of the scroll wrapper, when an element is first visible in the scroll wrapper or when an element disappears from the scroll wrapper. This requires some thinking since Smooth Div Scroll doesn't pay much attention to what's inside the scrollable area today.
Apart from features in the actual plugin I think I'll have to create more nice demos. For example you can create really slick looking scrollers just by using transparent PNG graphics and tweaking the CSS.

Source code and feedback

You can look at the current source code here: jquery.smoothDivScroll-1.2_beta.js

Send any comments or suggestions to thomas(at)karnhuset(dot)net. I won't answer requests for support on ongoing projects that you are working on though - not because I'm a mean selfish bastard but simply because there are so many requests and so little time. :-)

Thanks for stopping by!

Back to the main page