This is a message.

A complete navigational system

Scroll through these elements by using your up/down/left/right arrow keys and by clicking on the navigational elements or the large images themselves.

standalone demo

This demo showcases the endless possibilities available. You can have an unlimited number of "pages" under the vertical scrollable and each of those pages can contain a scrollable of unlimited size. Those scrollable items can contain anything - not just a simple image. You can even build your whole website based on this kind of system.

HTML coding

We have one vertical scrollable and three horizontal scrollables nested inside the vertical one. Here is the HTML structure: 

<!-- main navigator -->
<ul id="main_navi">
 
  <li>[thumbnail #1]</li>
  <li>[thumbnail #2]</li>
  <li>[thumbnail #3]</li>
</ul>
 
<!-- root element for the main scrollable -->
<div id="main">
 
  <!-- root element for pages -->
  <div id="pages">
 
    <!-- page #1 -->
    <div class="page">
 
      <!-- sub navigator #1 -->
      <div class="navi"></div>
 
      <!-- inner scrollable #1 -->
      <div class="scrollable">
 
	<!-- root element for scrollable items -->
	<div class="items">
 
	  <!-- items on the first page  -->
	  <div class="item"> [The Content] </div>
	  <div class="item"> [The Content] </div>
	  <div class="item"> [The Content] </div>
 
	</div>
 
      </div>
 
    </div>
 
    <!-- sub navigator #1 -->
    <div class="navi"></div>
 
    <!-- page #2 -->
    <div class="page">
      ...
 
    </div>
 
  </div>
 
</div>

HTML

CSS coding

Our CSS uses the principles learned in the minimal setup and in the vertical setup. Here are the most important elements: 

/* main vertical scroll */
#main {
  position:relative;
  overflow:hidden;
  height: 450px;
}
 
/* root element for pages */
#pages {
  position:absolute;
  height:20000em;
}
 
/* root element for horizontal scrollables */
.scrollable {
  position:relative;
  overflow:hidden;
  width: 510px;
  height: 450px;
}
 
/* root element for scrollable items */
.scrollable .items {
  width:20000em;
  position:absolute;
  clear:both;
}

CSS

JavaScript coding

Here is the documented JavaScript setup. One thing of interest is the keyboard: 'static' setting for the horizontal scrollable. This means that the up/down arrow keys will always control the scrollable although it has no focus. We use the onSeek callback to give the left/right arrow keys focus for the actively viewed scrollable. 

      // main vertical scroll
      $("#main").scrollable({
 
        // basic settings
        vertical: true,
 
        // up/down keys will always control this scrollable
        keyboard: 'static',
 
        // assign left/right keys to the actively viewed scrollable
        onSeek: function(event, i) {
          horizontal.eq(i).data("scrollable").focus();
        }
 
        // main navigator (thumbnail images)
      }).navigator("#main_navi");
 
      // horizontal scrollables. each one is circular and has its own navigator instance
      var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
 

      // when page loads setup keyboard focus on the first horzontal scrollable
      horizontal.eq(0).data("scrollable").focus();

JavaScript

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