Large one sized Scrollable
Scrollable demo 7 / 11 : Large one sized Scrollable
This demo continues from this tabs demo and makes it scrollable. Try clicking on the tabs, content area and the action buttons below the scrollable. This scrolalble uses the navigator and circular plugins.
Forget about scrollbars
The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need. The main design goals of this library are to provide visual customization functionality and programmability. Here are some example scenarios where you would benefit from using the library:
- Home pages, like this one right here
- Product catalogues
- News tickers
- Custom select boxes in forms
- Image galleries
- Video playlists
- All kinds of navigational systems
The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.
Rich yet simple
- Horizontal and vertical scrolling.
- Scrolling using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.
- The number of items scrolled at once is customizable.
- The navigational buttons are setup without a single line of JavaScript.
- Tabbed navigation like this one can be setup without any programming.
- Programmatic actions are available, such as: next, prev, nextPage, prevPage, seekTo, begin, and end.
- Dynamic addition and removal of Scrollable items.
- The ability to customize the scrolling experience with onBeforeSeek and onSeek listeners.
This tool uses a simple and natural syntax and has an advanced programming API. You can extend it with callback methods or with your own plugins. This tool has a similar structure and feel as the other tools. Learn to use this tool and you will know how to use the rest.
This tool is a mature project and is actively maintained. The source code is clean, professional and easy to follow. It passes Douglas Crockford's JavaScript Verifier and it it doesn't assign any global variables. Active forums keep this tool alive and you can expect to see new releases coming out in the future.
Extendable architecture
Just like other tools this tool can be extended with plugins. Currently available plugins include:
- circular makes an infinite loop from the Scrollable items so they continue cycling back to the beginning once the last item is reached.
- autoscroll makes the scrolling behaviour automatic and is highly configurable.
- navigator provides navigation buttons for switching between pages in Scrollable.
- mousewheel enables mousewheel support for Scrollable.
You can also write your own plugins. Another way to alter the default behaviour is the ability to make your own animation effects. There is lots of room for experimentation!
Look at the first demo to get started
You can study the workings of Scrollable in the following examples. They contain documented source code, along with a standalone page to allow you to easily transfer the examples to your own site. The most important example is the first one, "Minimal setup for Scrollable" because it teaches you the basics of using the library.
- Minimal setup for scrollable
- A vertical scrollable
- A simple scrollable image gallery
- Another gallery with many scrollables
- A scrollable registration wizard
- Scrollable plugins in action
- Large one sized Scrollable
- jQuery Tools demo area setup
- A complete scrollable navigational system
- Add and remove items from scrollable
- Customizing the scrolling animation
HTML coding
The trick here is to enable scrolling on the tab panes and the navigator plugin is enabled for the tabs. This time navigator items are not auto-generated and we make them ourselves as follows:
<!-- tabs work as navigator for scrollable -->
<ul id="flowtabs">
<li><a id="t1" href="#story">The Story</a></li>
<li><a id="t2" href="#features">Features</a></li>
<li><a id="t3" href="#plugins">Plugins</a></li>
<li><a id="t4" href="#demos">Demos</a></li>
</ul>Then we have the panes which have the following structure:
<!-- tab panes -->
<div id="flowpanes">
<!-- wrapper for scrollable items -->
<div class="items">
<!-- the items -->
<div> [ any HTML here ]</div>
<div> [ any HTML here ]</div>
<div> [ any HTML here ]</div>
<div> [ any HTML here ]</div>
</div>
</div>Below the panes we have our action buttons:
<!-- "Previous" action -->
<button class="prev">« Previous</button>
<!-- "Next" action -->
<button class="next">Next »</button>These buttons do not need any programming and they will work on-the-fly. This is because by default the scrollable tool looks for elements whose class names are "prev" and "next".
CSS coding
Just like the tabs demo this setup has also been styled with this CSS file and it has been overridden with the following settings to enable scrolling:
/* override the root element to enable scrolling */
#flowpanes {
position:relative;
overflow:hidden;
clear:both;
}
/* override single pane */
#flowpanes div {
float:left;
display:block;
width:670px;
cursor:pointer;
font-size:14px;
}
/* our additional wrapper element for the items */
#flowpanes .items {
width:20000em;
position:absolute;
clear:both;
margin:0;
padding:0;
}
#flowpanes .less, #flowpanes .less a {
color:#999 !important;
font-size:11px;
}JavaScript coding
Here is the commented JavaScript setup. The circular plugin must be defined before the navigator plugin.
// wait until document is fully scriptable
$(document).ready(function() {
// select #flowplanes and make it scrollable. use circular and navigator plugins
$("#flowpanes").scrollable({size: 1}).circular().mousewheel(400).navigator({
// select #flowtabs to be used as navigator
navi: "#flowtabs",
// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',
// assign "current" class name for the active A tag inside navigator
activeClass: 'current'
});
});Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that from User'ss Manual.
You may also want to try this demo without the circular plugin. You'll notice that by clicking on the content area it will change direction when it reaches the last item. You may also want to disable the clicking feature altogether by setting the disabled configuration property to false.
