This is a message.

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

Flying screens

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.
  • The navigational buttons are setup without a single line of JavaScript.
  • 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.

Extendable architecture

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.

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!

standalone demo

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="tabs" class="css-tabs navi">
  <li><a id="t1" class="current" 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>

HTML

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>

HTML

Below the panes we have our action buttons: 

  <!-- "Previous" action -->
  <button class="prev">&laquo; Previous</button>
 
  <!-- "Next" action -->
  <button class="next">Next &raquo;</button>

HTML

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 */
	.css-panes {
        height: 410px;
        width: 702px;
		position:relative;
		overflow:hidden;
		clear:both;
        background-color: transparent;
	}
 
	/* override single pane */
	.css-panes div {
		float:left;
		display:block;
		width:660px;
		font-size:14px;
        background-color: transparent;
	}
 
	/* our additional wrapper element for the items */
	.css-panes .items {
		width:20000em;
		position:absolute;
		clear:both;
		margin:0;
		padding:0;
        border:0;
	}
 

	.css-panes .less, .css-panes .less a {
		color:#999 !important;
		font-size:11px;
	}

CSS

JavaScript coding

Here is the commented JavaScript setup. 

    // wait until document is fully scriptable
    $(function() {
 
    // select #flowplanes and make it scrollable. use circular and navigator plugins
    $(".css-panes").scrollable({ circular: true, mousewheel: true }).navigator({
 
    // select #flowtabs to be used as navigator
    navi: ".css-tabs",
 
    // 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',
 
    // make browser's back button work
    history: true
 
    });
    });

JavaScript

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that from User's Manual.

Photo credits »