jQuery Tools / Expose - Make your HTML elements stand out

Demo

Start entering text on the fields below and you'll see the exposing effect:

The story

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. The exposing effect was first introduced in the overlay tool. Usually the effect is an integral part of the program and cannot be used separately. This tool takes the idea of exposing a little further. It is a separate tool that can be used as a general purpose expose utility. You can use it for overlays, forms, images, videos or Flash objects.

You can use CSS to tweak the look of the semi-transparent surrounding layer which we refer to as the "mask".

This tool uses a simple and natural syntax and has an advanced programming API. You can extend it with callback methods or with your own plugins. This tool has a similar structure and feel as the other tools. Learn to use this tool and you will know how to use the rest.

This tool is a mature project and is actively maintained. The source code is clean, professional and easy to follow. It passes Douglas Crockford's JavaScript Verifier and it it doesn't assign any global variables. Active forums keep this tool alive and you can expect to see new releases coming out in the future.

Usage

We believe that the best way to learn is through demos. The following demos are fully documented and a standalone page is provided to get expose working on your site. It's really important to study the first demo "Minimal setup for expose" because it teaches you the basics of using the library.

• Minimal setup for expose
• Styling the mask with a background image
• Exposing a form
• Exposing videos with a custom mask
• Working with multiple exposes

Expose and Flowplayer demos

These demos show how to use a video player together with the expose tool:

• Exposing video upon mouseover
• Exposing videos
• Custom fullscreen action with overlay and expose
• Email and embed features with overlay and expose

Initialization

There are many other ways of using this tool than the demos provided here. It is important to realize that you can have many exposing instances on the page simultaneously and each of them can have different configurations. You can initialize the exposing effect without any configuration variables like this:

// initialize exposing for selected elements
var elements = $("div.to_be_exposed").expose();

With this JavaScript one-liner you have silently configured the exposing tool with the default dark blue background color #456 and now you need to call the load API method for the exposing to take effect. Here is how it happens:

// grab the exposing API (with another expose() call) and call load method
elements.expose().load();

Of course, you can do this with one single call like this:

// return api upon initialization and call load immediately. api is returned
var api = $("div.to_be_exposed").expose({api: true}).load();

expose Graphics

You can use our graphics as the basis for your design. You can freely change the design as you see fit. Click the image on the right to download a zip file. Before using the graphics, you should consult the User's Guide on how graphics can be used when designing the look and feel of the tools.

Here are a few examples of what is included in the zip file:

Configuration

The simplest form of configuration is to simply supply the background color as a string:

// a custom background color.
$("div.to_be_exposed").expose("#987ccc");

You can also supply the configuration as an object with many configuration variables. Here is the generic method of using expose:

// selects one or more elements to be exposed
$("JQUERY SELECTOR").expose({
	/* expose configuration goes here */

	// one configuration property
	color: '#ccc',

	// another property
	opacity: 0.7,

	// ... the rest of the configuration properties
});

You select one or more elements to be exposed with the jQuery selector. By default, the return value is a jQuery object associated with the selection. Here is a a full list of available configuration options:

Using callback functions

Here is an example of an onBeforeLoad callback function. Inside any callback function the this variable is a pointer to the expose scripting API.

$("#myDiv").expose({

	// before exposing begins ...
	onBeforeLoad: function(event) {

		// grow the exposed elements smoothly by 100 pixels
		this.getExposed().animate({width: '+=100'});
	}
});

See the Using Callback Functions section in the User's Guide for a more detailed description about this important topic.

Scripting API

This tool has a useful API for scripters. A lot of effort has been put into it and you can enrich the exposing experience with it. You can get a handle to the API in numerous ways as described in the Users Manual. Here is an example of how to access the API:

// initialize expose and return the API
var api = $("#myDiv").expose({api: true});

// expose programmatically with this call
api.load()

// close the expose
api.close();

// register a callback function
api.onLoad(function() {
	// alter exposed elements upon loading
	this.getExposed().css({backgroundColor: 'black'});
});

Method listing

Release Notes

  follow jQuery Tools on