jquery.scrollable 1.0.0 release notes

New Features

This is a major upgrade. A version number went from 0.13 to an "official" 1.0.0. Here are the new features.

now it's possible to add/remove items from scrollable using standard jQuery methods. see demo
automatic action generation for "next page" and "prev page". see demo
interval option to automatically step through elements in specified intervals. see demo
next/prev links can now be hidden (or styled) when they are not active using disabledClass configuration option
hoverClass for styling elements upon mouseover event
new event handler onBeforeSeek which is triggered before seeking occurs. returning false here cancels seeking
a whole new API for interacting with scrollable.
getConf() method that you can read and modify for making the tool behave differently at runtime
easing configuration option for changing how scrolling animation behaves. two options "swing" and "linear"
all seeking funktions in an api accept optional callback function that is triggered when seeking finished. this happens after onBeforeSeek and before onSeek events.
keyboard option to enable/disable navigation with arrow keys
error handling on callback functions
alert configuration option to enable/disable alert boxes when you have erroneous code in your callbacks
removed the auto generated wrapper element DIV.__scrollable so that there are no undocumented surprises
better code structure (public methods, private members, source code is easy to understand)

Bug fixes

scrollable now works when there are less or equal to two items
made opera mousewheel work
click on the next to last item now works

Changes

This version is not backward compatible so you are using older version you will have to change your HTML/CSS and JavaScript codes. Here is a list of changes that may break your old setup.

New HTML layout

This version of scrollable requires that you have two nested wrapper elements for scrollable items as follows.

<!-- root element for scrollable. class name is optional but useful -->
<div class="scrollable">

	<!-- root element for entries. again class name is optional -->
	<div class="entries">
		<!-- first entry -->
		<div></div>

		<!-- second entry -->
		<div></div>

		<!-- ... -->
	</div>
</div>

And those wrappers must be styled according to the rules specified in minimal setup demo. Previous version did some dirty work on the background and added an extra wrapper element automatically to achieve scrolling. This was a good thing for non- programmers but bad for serious programmers who doesn't like dirty tricks they do not understand. Now everything is "open" and understandable.

Navigational elements as siblings

Navigational elements are no longer positioned inside the root element and they are not positioned as siblings. Here is an example of the new layout

<!-- link that navigates to previous item. this is on the same level as scrollable -->
<a class="prev"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<!-- root element for entries -->
	<div class="entries">
		...
	</div>

</div>

<!-- link that navigates to next item. same here. not placed inside scrollable -->
<a class="next"></a>

So those "next" and "prev" links are now beside the DIV.scrollable element and not inside it. This leads to simpler CSS coding and makes things easier to understand. The tool searches for the first elements beside it to act as navigators so you can have multiple scrollables on the page and things will work.

Same goes to navigator (the one that navigates between pages), which must also be a sibling to the scrollable. Also note that the tags that are now auto generated inside navigator are now A tags and not SPANs. This may affect to your CSS files.

The 'activeClass' for navigator has moved from being attached to the active <a> tag to being attached to the direct children of the navigator root.

API changes

"Unified" API support has been deprecated for a long time and it is now removed. This means that calls such as

$("div.scrollable").scrollable("next");

Won't work and you must do

$("div.scrollable").scrollable().next();

getStatus function is no longer supported and it is now splitted into bunch of other methods such as getIndex, getPageIndex, getSize and getPageAmount.