The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Smooth Div Scroll
Smooth Div Scroll
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible controls (unless you want to) since the scrolling is done using hotspots within the scrollable area or via autoscrolling.
If you choose to scroll manually, scrolling is controlled by moving the mouse over the left and right hotspots within the scrollable area - not by clicking at links or buttons. The further left/right you move the cursor, the faster the scrolling. And if it's not scrolling fast enough for you, there's is an optional speed booster functionality that kicks in when the user presses the mouse button. The hotspots can be invisible, visible for a while after the page has loaded or visible all the time - you decide what's best. You control all aspects of the design through a simple CSS.
You can also disable the hot spots altogether and just let it autoscroll - like a running ticker or slideshow. Autoscrolling can be from left to right then stop, right to left then stop, back and forth and in an endless loop (scrolling either endlessly left or right). There's also a mixed mode where Smooth Div Scroll will autoscroll as long as the user does not use the hot spots. As soon as the user moves the pointer over one of the hot spots, the autoscrolling will stop and the user takes control of the scrolling. The mixed mode is excellent for showing the user that there is a part of the page that is scrollable and if you combine it with having visible hot spots for the first 10-15 seconds after the page has loaded, your users will instinctively understand how to interact with the scroller.
Use it for
- Image galleries
- Horizontal scrolling webpages
- Stock tickers
- Scrolling text
- Special navigation solutions
- Displaying products a web shop
- ...
Download, documentation and demos
You will find a download, complete documentation, several demos, user forum, a newsletter and lots of extra info on the plugin homepage: http://www.smoothdivscroll.com
Using it is dead simple! Here is the simplest way:
<script type="text/javascript">
$(function() {
$("div#makeMeScrollable").smoothDivScroll();
});
</script>But if you go to the plugin homepage, you'll see that you can customize almost all aspects of the scroller with options.
The (X)HTML structure will look something like this:
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/demo/image_1.jpg" width="400" height="200" />
<img src="images/demo/image_2.jpg" width="350" height="200" />
<img src="images/demo/image_3.jpg" width="545" height="200" />
<img src="images/demo/image_4.jpg" width="400" height="200" />
<img src="images/demo/image_5.jpg" width="600" height="200" />
</div>
</div>
</div>In this example Smooth Div Scroll will take the div with the id "makeMeScrollable" and turn it into a scrollable row of images.
Don't forget to add the latest version of the jQuery library and the jQuery UI widget component to the page! The jQuery UI widget component is a part of the jQuery UI library, but if you don't need all the other stuff in the library you can add jquery.ui.widget.js as a stand-alone file to your page.
Public methods - puts you in control
I (almost) dare to say that Smooth Div Scroll does whatever you want it to do, whenever you want it to. Start out by autoscrolling left and then switch to autoscrolling right. Stop the autoscrolling and then start it again. Hide the hotspots and then show them in again, or why not fade them in and out as fast or slow as you want. Add new content after the scroller has loaded and choose if you want it added before or after the current content. Or just replace the current content with something entirely new. Pause the autoscrolling to do something else and then resume it again when you're done.
Callbacks - it tells you what it's doing
Smooth Div Scroll has callbacks for all major events in the plugin. It tells you when it has reached the far left or right end of the scrolling, when the user moves the mouse over the hotspots, when it has moved to a certain element at your request and so on. Hooking in to these callbacks you can easily make Smooth Div Scroll work together with your own code or other plugins.
Options - alter them at runtime
Just like a regular jQuery plugin, you have the ability to set a number of options when the plugin is initialized. In the older versions you couldn't change them after that. Now you can! You could for example write a function of your own that increases or decreases the autoscrolling speed when other things happen on the page and Smooth Div Scroll will speed up or slow down on the fly!
Did you like this plugin?
If you found this plugin useful, I'd appreciate it if you would give it a good rating (at the top of this page).
Happy scrolling!
/Thomas Kahn