Browser back button navigation
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 scrollable is configured to be circular (no beginning or end) and it uses the navigator plugin with support for the browser's back button.
Add custom scrolls to your site
You can use this tool on
- 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 main design goals of this tool are to provide visual customization, ease of use and programmability. 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.
- Any amount of items on one "page". Pages can have variable width.
- Tabbed navigation like this example can be setup without any programming.
- Programmatic actions are available, such as: next, prev, seekTo, begin,and end.
- Dynamic addition and removal of Scrollable items.
- The ability to customize the scrolling experience with onBeforeSeek and onSeek listeners.
- Ability to setup infinite loops without beginning or end
All of this in just a 1.02 Kb file! Unmatched. Uncomparable.
Just like other tools this tool can be extended with plugins. Currently available plugins include:
- autoscroll makes the scrolling behaviour automatic and is highly configurable.
- navigator provides navigation buttons for switching between pages in Scrollable. Can be enabled with a history feature so that you can scroll with your browser's back (and forward) button.
Study the first demo to get a quick start
- Minimal setup for scrollable
- A vertical scrollable
- A simple scrollable image gallery
- Gallery with multiple scrollables
- A scrollable registration wizard
- Scrollable plugins in action
- Browser back button navigation
- jQuery tools home page setup
- A complete navigational system
- Add and remove items from scrollable
- Customizing the scrolling animation
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:
Then we have the panes which have the following structure:
Below the panes we have our action buttons:
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".
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:
Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that from User's Manual.