This document describes how the jQuery Tools home
page has been done. We recommend opening
the standalone version of the demo in another
browser window or tab while reading this document.
We have one root element div#scroll for everything and
it also functions as the root element for the scrollable. The
scrollable setup follows the same principles as
the previous demo but this time we have
An empty scrollable item which is shown when the page is
An initial "intro page" which is shown on top of the empty
scrollable item when the page is loaded
the scrollable navigator (at the bottom of the items) also has
an item for the first "empty" item but it is invisible making
it impossible to click
As in every jQuery Tools setup, the CSS is the hardest part. We are
not going very deep into the details on this. We follow the same
principles on the scrollable elements as in
the minimal setup (as always). The
navigator items are done with a CSS sprite technique using this
image. We define a different background position for each
thumbnail and the position is changed when the item is being
clicked, mouseovered or it is active. Here is the CSS setup for the
The logic on the demo is that the first page is a special one and is
outside the scrollable items. We use special logic for that. The
scrollable itself is installed normally.
Here is the special logic for the intro page.
Note: the demo can also be navigated by using the
The new jQuery Tools book by Alex Libby explores the library in a
precise and structured fashion. If you are getting started on jQuery Tools or
looking for better ways to use the library, this book will be your ally.