This is a message.

Version 1.1.0. September 03, 2009 Smaller, faster, richer and more stable

After ten weeks of creative free time and two months of hard work it's time to shake up the web again. This version of jQuery Tools is even smaller than before: ${v.jqtSize}kB of (pollution free) web engine fuel. This was possible by stripping the non-essential parts of the tools into separate modules. Now jQuery Tools is the first framework to take full advantage of jQuery's powerful chaining technology. Let's take a look at this scrollable instance:


The new Scrollable has only the absolutely necessary features to make things scroll. We have also added a new circular plugin to make an infinite loop for items and the autoscroll plugin makes the items scroll automatically without any user interaction. This is how it's configured.

// heeeeeeeeeeere we go.
$("#chained").scrollable({circular: true, mousewheel: true}).navigator().autoscroll({
interval: 3000
});

JavaScript

You can have multiple scrollables on the page and they can all be activated with this single line of code. All plugins may have their own set of configuration variables. This kind of design pattern makes the code more organized and easier to understand. In the programming world this pattern is called a decorator pattern which is at the heart of jQuery: "Find elements and do stuff with them". jQuery Tools takes this seriously and a step further than other libraries.

You can find a complete list of the new features and changes in Scrollable in the Full version history. For example, you are now able to build complete navigational systems by taking advantage of better keyboard control. But read on...

Overlay plugin and effect framework

Overlay has undergone the largest rewrite of all tools. Just like tabs and tooltips it has a so-called "effect framework". You can use a different overlaying effect for different situations:

  1. Simple effects for info and warning boxes
  2. Eye candy effects for product presentations
  3. "Lightbox"-style effects for image galleries
  4. Modal dialogs for alter boxes and interactive prompts

This version of overlay handles all of these situations and you don't need to search for different tools for different needs. It is your all-around solution for overlaying HTML content. It simply has no competition. Here you can see the Overlay Gallery plugin in action:

$(".scrollable").scrollable();
 
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
 
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
 
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 
// the large image from www.flickr.com
var img = new Image();
 

// call this function after it's loaded
img.onload = function() {
 
// make wrapper fully visible
wrap.fadeTo("fast", 1);
 
// change the image
wrap.find("img").attr("src", url);
 
};
 
// begin loading the image from www.flickr.com
img.src = url;
 
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
 
// when page loads simulate a "click" on the first image
}).filter(":first").click();

JavaScript

Custom overlay effects

The default effect for overlay is no longer the apple.com like "growing image animation". This Apple effect has been moved to a separate, downloadable effect. The default effect is a simple fade in/out effect. Writing new overlay effects is not nuclear science. Here is the default effect's source code:

$.tools.overlay.addEffect("default", function() {
this.getOverlay().fadeIn();
 
}, function() {
this.getOverlay().fadeOut();
});

JavaScript

This is a simplified version, but you get the point. As you can see you can add new effects with the $.tools.overlay.addEffect method. This was previously $.tools.addOverlayEffect which is no longer supported. Here you can see a demo about a custom effect for overlay.

Tooltip 1.1.0.

There are some serious improvements in the Tooltip plugin. A very important feature is the ability to define the tooltip contents for the trigger element's title attribute without the need for an additional element containing the content.

You can now use a brand new dynamic plugin for tooltip to dynamically change the position of the tooltip when it cannot be shown on the viewport. Click here to scroll a little lower and see how tooltips behave now. If there is no room on the top edge, then the tooltip is shown on the bottom edge. You can change the effect and any other configuration variable dynamically whenever the repositioning occurs.

Tooltip 1.1.0. introduces completely new event management where you can fully control when the tooltip will be shown or hidden.

Faster page load with many tooltips

If you have many (many!) tooltips on the page you can use a new lazy configuration option to load the tooltips only when they are first being used. This makes the page loads significantly faster. The tooltip is wise enough to switch to lazy loading when there are more than 20 tooltips on the page, but you can control this behaviour explicitly with the lazy property.

Other improvements for tooltips include a new predelay configuration for configuring a delay before the tooltip is shown. And the default "slideup" effect is now named "slide" because you can alter the sliding direction with a new direction property. You can also enable a bounce configuration property so that the tooltip slides back to where it originated from. The bouncing effect can be seen on the above tooltips when those tooltips slide downwards.

Slideshow plugin for Tabs

There are many new features for tabs such as a new built-in "ajax" effect, a fadeOutSpeed configuration option for performing "crossfades" and a rotate configuration property for making circular navigational systems for tabs. The most notable addition is a new slideshow plugin which you can see here:

prev

First pane

Flying screens

Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis.

Second pane

Flying screens

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Vivamus euismod euismod sagittis. Etiam cursus neque non lectus mattis cursus et a libero. Vivamus condimentum hendrerit metus, a sollicitudin magna vulputate eu. Donec sed tincidunt lectus. Donec tellus lectus, fermentum sit amet porta non, rhoncus ac mi. Quisque placerat auctor justo, a egestas urna tincidunt eleifend.

Third pane

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

Aenean elit lorem, pretium vitae dictum in, fermentum consequat dolor. Proin consectetur sollicitudin tellus, non elementum turpis pharetra non. Sed quis tellus quam.

next

List of new plugins and effects

jQuery Tools 1.1 is a massive upgrade with many new features. Here is a complete list of the new plugins and effects:

plugintooltypedescription
slideshow tabs plugin Transforms a typical tab/pane combination into a working slideshow.
history tabs plugin Ability to navigate through tabs with browser's back and forward buttons. You can also use this as a generic utility for handling the browser's navigational buttons.
gallery overlay plugin Create "lightbox"-style image galleries.
apple overlay effect An overlay effect that you have seen on apple.com.
infinite scrollable plugin Makes an infinite loop from the scrollable items so they continue to cycle endlessly.
autoscroll scrollable plugin Makes the scrolling behaviour automatic. Highly configurable.
navigator scrollable plugin Provides navigation buttons for switching between pages in scrollable.
mousewheel scrollable plugin Enables mousewheel support for scrollable. You can also use this as a generic utility for managing the user's mousewheel events.
dynamic tooltip plugin Dynamic positioning of the tooltip so that it always stays in the viewport.

Global configuration

jQuery Tools 1.1.0. introduces a new global variable jQuery.tools or its shorthand form $.tools. If you use Firefox and have the Firebug add-on installed, try entering the command console.dir($.tools) in Firebug's Console. You'll see the following kind of tree structure:

Global configuration


Here you can see the available tools, plugins and effects as well as their versions. But most importantly you'll see their default configuration settings. You can see the available configuration variables and their default values. You can also change these values! By changing them you don't need to specify the same settings every time you use jQuery Tools. You can, for example, change the default size for each scrollable to 4 as follows:

// all scrollables has the size 4 by default
$.tools.scrollable.conf.size = 4;

JavaScript

After this you can simply call $("div.scrollable").scrollable(); and every time the size is 4. Of course you can change the default value in the initial configuration just like before. These global configurations also serve as a good source of documentation. You can quickly look for the available configuration options. Read more about global configuration.

Internet Explorer issues

This website uses a lot of semi transparent PNG-24 images which are not natively supported by IE6.

jQuery Tools are proven to work with IE 6.0+ but this website does not optimize the visual experience for IE6 users.

Because of this confusion I have written a new section in the User's Manual about PNG images together with Internet Explorer 6.

Completely updated Demo Area

The demo has been updated with over 10 completely new demos showing the new possibilities of this library. Here are the most important additions:

Free CDN for all jQuery Tools users

The http://cdn.jquerytools.org Content Delivery Network (CDN) is now completely free! You can use it freely in any website including production environments. This network has been kindly offered for all jQuery Tools users by Max CDN. Respect to them! There are three files available for you.

<!-- the official jQuery Tools library (24.90 kB) -->
<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script>
 
<!-- jQuery Tools without the jQuery library (${v.jqtSize}kB) -->
<script src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script>
 
<!-- Full jQuery Tools library. Includes all plugins and effects. (28.90 kB) -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

HTML

By using this network the Tools will be loaded with maximum performance no matter where your client is located on the globe. The DNS records are currently being updated across the globe. Check out our updated Download Area.

Changes that break old installations

There are quite a few changes that may break your existing installation. If you simply just change the file with a newer one your site may not work so you should read this chapter with care.

Overlay default behaviour

The default effect for overlay is no longer the "growing image animation" a.k.a. the Apple effect. The overlay simply gradually fades the overlay in and out. The previous effect is now a separate downloadable item and it must be explicitly configured. Here is how you do it:

// Version 1.0.
$(".trigger").overlay({finish: {top: 60}});
 
// Version 1.1. "apple" effect must be explicitly configured
$(".trigger").overlay({effect: 'apple', top: 60});

JavaScript

The Apple effect is no longer included in the default distribution under http://cdn.jquerytools.org and you need to download it separately. You can also see from the above example that all configuration variables under the finish property have been moved to the root level. For example finish.top can now be simply written as top.

Scrollable features as plugins

Navigator, autoscroll or mousewheel features are now separate plugins and should be configured differently. Here is how:

// Version 1.0. features are enabled with configuration properties
$(".scroller").scrollable({
 
// autoscroll feature
interval: 3000
 
// navigator feature
navi: '#mynavi'
});
 
// Version 1.1. these features are separate plugins:
$(".scroller").scrollable().navigator({navi: '#mynavi'}).autoscroll({interval: 3000});

JavaScript

The mousewheel support was automatically enabled if you have included the jQuery.mousewheel plugin into your page. In version 1.1. this is also a separate plugin called mousewheel which depends on Three Dub Media's wheel plugin which is a smaller, simplified interpretation of the jQuery.mousewheel plugin.

All these plugins are not included in the default distribution of jQuery Tools under http://cdn.jquerytools.org and you need to download them separately.

The navigational elements of Scrollable

You can now have multiple navigational elements controlling the scrollable. For example, you can have multiple "Scroll forwards" buttons just by assigning a next CSS classname to them. In the previous version, navigational elements had to be siblings of the scrollable root unless the selector for navigational elements was an ID selector (starts with the # character). And you could not have multiple elements of the same action (such as "next page").

Version 1.1. changes the logic so that the navigational elements can be positioned anywhere on the page and they don't not have to be siblings anymore. Here is more information about multiple scrollables with navigational element.

History feature in Tabs

The history feature is also a separate plugin and here is the altered configuration:

// Version 1.0. $("ul.tabs").tabs(".panes > div", {history: true}); // Version 1.1. $("ul.tabs").tabs(".panes > div").history();

Again, the history plugin is not included in the default distribution of jQuery Tools under http://cdn.jquerytools.org and you need to download it separately.

Custom effects

If you have made custom effects for tabs or tooltips the method names for adding the effects have changed as follows:

We take the advantage of the new structure of the $.tools variable which is now much more scalable. Remember that you can now also add effects for Overlay with the new $.tools.overlay.addEffect() method.