This is a message.

Version 1.2.0. April 30, 2010 A huge upgrade + the FORM tools

This library is constantly improving. New tools are introduced and old tools are rewritten or even dropped. New configuration variables are introduced and old ones are removed. Radical changes keep this library on the cutting edge. The downside is that when you do upgrade, things may not always work as expected. It happens in this version and it will happen in future versions too.

All Tools

The previous version had the handy configuration variable api for accessing the Tools programming API. Many people liked it but not all. After serious consideration I decided to drop it and go with the jQuery "community". Now you'll have to access the api with jQuery's data method. For example: 

// get handle to scrollable's API
var api = $(".scrollable").data("scrollable");

JavaScript
The api configuration variable is still working but is now deprecated. Another common practice for jQuery users is to use the bind method to assign callback methods. For example: 
$(".scrollable").bind("seekTo", function() {
	// Here this- variable references the DOM object
});

JavaScript

This is now supported. You can also assign callback methods from the programming API just like before. For example: 

var api = $(".scrollable").data("scrollable");
 
api.seekTo(function() {
	// Here the 'this' variable references the scrollable API
});

JavaScript

Read about events in jQuery Tools to learn more details.

A brand new Scrollable

Scrollable has undergone the largest change of all tools. The new scrollable is more than 50% smaller than the previous version! This was possible by changing the whole logic of the tool. The new logic has been greatly simplified. Every time you want to scroll you are advancing one step. There are no pages at all. If you want pages you need to design them with HTML. Here is an example layout for scrollable that has three pages and each page has four items: 

<!-- root element -->
<div class="scrollable">
 
	<!-- root element for scrollable items -->
	<div class="items">
 
		<!-- page #1 -->
		<div class="page">
			<div></div> <div></div> <div></div> <div></div>
		</div>
 
		<!-- page #2 -->
		<div class="page">
			<div></div> <div></div> <div></div> <div></div>
		</div>
 
		<!-- page #3 -->
		<div class="page">
			<div></div> <div></div> <div></div> <div></div>
		</div>
	</div>
</div>

JavaScript

And the scrollable is initalized with this call: 

$(".scrollable").scrollable();

JavaScript

The size configuration variable is no longer needed. Now you are free to design your pages and each page can have any amount of items or HTML.

Due to the lack of pages, the following configuration variables were removed: size, keyboardSteps, nextPage and prevPage and the following methods were removed: getPageAmount, getPageIndex, movePage, nextPage, prevPage and setPage.

Circular plugin

In the new scrollable, infinite looping is built inside the tool and you enable it with the circular configuration property as follows: 

// 1.2. circular feature is built-in the tool
$(".scrollable").scrollable({ circular: true });
 
// old version. separate circular plugin
$(".scrollable").scrollable().circular();

JavaScript

The new circular feature is more solid and is no longer considered as beta.

Clickable

The new scrollable does not support moving forward or backward if you click on the items. If you want to implement clicking, you need to do it yourself. For example: 

// initialize circular scrollable
$(".scrollable").scrollable({ circular: true }).click(function() {
 
	// every time it is clicked it advances one step forward
	$(this).data("scrollable").next();
});

JavaScript

Because this feature was removed, the following configuration variables no longer exist: clickable and activeClass. Also the click method was removed from the JavaScript API.

Adding new items

Previously, you added items directly with jQuery's append method and called scrollable's reload method. Now there is a new addItem method that you use to add items to the scrollable. It can now be used even with circular scrollables. Examples: 

// get scrollable API
var api = $("#myscroll").data("scrollable");
 
// supply item as string
api.addItem("<div>My new item</div>");
 
// query item on the page and add it to the scrollable
api.addItem($("#existing_item"));
 
// create an item and add it to the scrollable
var item = $("<div/>", { class: 'item' });
api.addItem(item);

JavaScript

When an item is added the new onAddItem event is fired.

Support for back button

If you use the navigator plugin you have the ability to browse through scrollable items with the browser's back (and forward) buttons. For example: 

$(".scrollable").scrollable().navigator({history: true});

JavaScript

This feature is added with the history configuration option. It works even for dynamically added items.

Miscellaneous changes

The new scrollable is good at guessing whether it is oriented vertically or horizontally by investigating its dimensions. If the height is larger than the width then the scrollable is vertical. You can override this automatic determination with the vertical configuration option.

The item and globalNav configuration variables and onStart event were removed because they were so rarely used and too complex to explain. Such features should not even exist.

The hoverClass option was removed because this feature can easily be added with external scripting as follows: 

$(".item").hover(function() {
	$(this).toggleClass("active");
});

JavaScript

The reload method was removed. There is no need to reload again. The tool looks for the configuration changes automatically.

The new scrollable is so different that the documentation does not say whether a feature is added or removed in this release. The documentation simply describes the latest version.

Tooltip

The new Tooltip does not require that you create the tooltip element manually. You can simply supply the tooltip in the title attribute and call $(".tooltip_triggers").tooltip();. The tooltips are automatically generated and by default they are assigned the CSS class name tooltip. You can change the default class name with the new configuration option tipClass. You can also supply the whole HTML layout for the generated tooltips by using the new layout configuration option.

If you had previously used the tip: '.tooltip' configuration, simply remove that.

The tip configuration option is only used when you want to use a single tooltip element for multiple triggers.

In previous version you were able to supply the tip and onBeforeShow configuration options as the only argument for the tooltip. This is no longer supported for the sake of simplicity.

The oneInstance and lazy configuration options were removed to make the source code cleaner.

Overlay

The biggest change in the new overlay is that the overlay positioning is fixed by default. This means that overlay stays still while the screen is scrolled. You can disable this by setting the fixed configuration property to false then the overlay is positioned relative to the document so that when the screen is scrolled then the overlay moves along with the document.

Here is a list of small changes for overlay in 1.2.0:

The custom effects load method receives the position as its first argument. For example: 

// load function receives two arguments instead of one.
$.tools.tooltip.addEffect("my-effect", function(position, done) {
 
	// position has two properties: top and left
	var top = position.top,
		 left = position.left;
 
}, function(done) {
 
});

JavaScript

No more Overlay Gallery plugin

The previous jQuery Tools version had an Overlay Gallery plugin for making a "lightbox" type of slideshow. It didn't fit with the rest of the library mainly because of its hard-coded logic. So it was dropped! Something similar can be achieved with the the Slideshow plugin and placing it on Overlay.

Tabs

The history feature is now enabled with a history configuration option instead of a plugin. For example: 

// old version: history tabs
$(".tabs").tabs(".panes > div").history();
 
// version 1.2: history option
$(".tabs").tabs(".panes > div", { history: true });

JavaScript

This requires that the history tool is included on the page. The new History tool can be utilized by other tools as well. Now the new scrollable also can take advantage of the browser's back button.

In this version there is no need to initially set a pane visible with CSS using display: block. The tabs automatically clicks on the first pane if all panes are hidden. When using the "fade" effect, if a pane is already visible it is not "clicked" in vain.

Slideshow plugin for Tabs

In the previous version, slideshow methods such as play, pause and stop were added to the JavaScript API of the Tabs. Now they are methods of the slideshow plugin itself. For example: 

// initialize tabs and the slideshow plugin
$(".tabs").tabs(".panes > DIV").slideshow({ autoplay: true});
 
// get access to the slideshow API
var api = $(".tabs").data("slideshow");
 
// do something with the API
api.onPause(function()  {
 
	// the 'this' variable refers to the slideshow API
	var conf = this.getConf();
});

JavaScript

Expose

The new expose is more straightforward. There is no ability to have multiple masks simultaneously making the logic much simpler and the file size smaller. There are two terms being used: mask is a large element that is being placed on top of the document. In the new version this mask is a singleton that you can access with the static variable $.mask. expose is a verb that means placing selected elements on top of the mask. Here is how you work with the new Expose tool: 

// place a white mask over the page
$(document).mask();
 
// place a mask but let selected elements show through (expose)
$("div.to_be_exposed").expose();
 
// close the mask
$.mask.close();

JavaScript

There are two different calls: mask and expose. The mask method is only available for the document object and you cannot use any other selector. The expose() method can take any jQuery selector and all elements returned by the selector are placed on top of the mask.

The mask is loaded immediately after the expose or mask call. You can supply a different configuration on each call and the latest call is remembered. A subsequent expose call for example will use the previously used configuration if no arguments are given.

You can also use an existing element as a mask. By default the tool uses an element whose id is exposeMask and if it does not exist, then it is created automatically.

The new configuration variable startOpacity defines the initial transparency level of the mask before it starts fading in to the desired opacity as specified by the opacity option. You can, for example, start with full opacity and gradually fade to a semi-transparent mask.

On some occasions the mask did not fill the whole space of the document. Now these rare occasions have been eliminated. When the mask closes, all document listeners are removed making the page one thousand millisecond more responsive.

Flashembed

Flashembed is now part of the Toolbox and no longer one of the main UI tools. The major change in this tool that it no longer contains flashembed.domReady() function that can be used to evaluate code right after the DOM is ready. This feature is a core part of the mainstream JavaScript libraries including jQuery and should not be included here. Another change is that the flashembed() call must be evaluated after the container element. So this won't work 

<!-- this setup won't work anymore! -->
 
<script>
// attempt to install Flash object inside a container that is *below* this call
flashembed("flashContainer", "my-flash-object.swf");
</script>
 
<!-- container for Flash -->
<div id="flashContainer"></div>

HTML

In the new version you need to move the script below the container: 

<!-- container for Flash -->
<div id="flashContainer"></div>
 
<!-- this works -->
<script>
flashembed("flashContainer", "my-flash-object.swf");
</script>

HTML

Upon initialization you can prefix the ID name with #- character. For example #mydiv simulating the syntax of jQuery selectors. For example:

Generated OBJECT code now contains a name attribute along with id attribute. This makes it possible to use ExternalInterface on some older browsers. 

<script>
flashembed("#flashContainer", "my-flash-object.swf");
</script>

HTML

The tool no longer checks for Flash versions 6 and below. By the time of writing only 0.08 percent of users on Flowplayer website were using Flash 6 or below. No need to make complex logic for such minority.

Flashembed API changes

In general Flashembed feels much more similar to other tools in the library. In previous versions it has been more of a black sheep.

Thanks to