• Home
• Download
• Documentation
• Plugins
• Blog
• Forums

JavaScript tool expose Make your HTML elements stand out

Quick start

jquery.expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Click on the button to see an example

// following code will make this code box stand out
$("#code").expose();

Show me!

Another example: exposed video

Of course when we are on Flowplayer site this tool is especially interesting for videos. Click on this player to see things in action. After the video you can see how it was configured.

$f("player", "../swf/flowplayer-3.0.0-rc3.swf", {

	// disable controlbars
	plugins:{controls:null},
	
	// perform exposing when playback starts. you can make it happen any time you want
	onStart:function() {
		$(this.getParent()).expose();		
	}
});

You can also expose multiple elements at once. Following example exposes all code boxes on this page and this time we used a different color for the surrounding "blanket".

$("div.code").expose({color:"#254558"});

Show me

Usage

Here are some examples how you can use this tool

// simple usage: just select the elements you want to expose using jQuery
$("div.highlight").expose();

// tweak the speed how long the surroundings will fade in and fade out 
$("#myDiv").expose(3000);

Full syntax

expose also accepts object argument with following properties.

/* 
	these values are the default values so it's 
	the same as calling expose() without arguments
*/
$("myDiv").expose({
	speed: 1500,
	
	// the background color of the dark surrounding "blanket"
	color: '#333,
	
	// opacity level of the blanket. 1.0 = no transparency
	opacity: 0.8,
	
	// the layer index of the blanket
	zIndex: 1, 
	
	// a callback function that is called when exposing is removed
	onClose: null
});

zIndez option is rarely needed. You only need to tweak in such situations where you have set custom z-indexes to your HTML elements with CSS. By default all HTML elements are on the "zero layer" where zIndex has the value 0. This tool makes the exposed elements appear on the next layer (zIndex + 1.). It's interesting to note that if you want some elements on your page to be automatically placed over the blanket you can set their zIndex to 1.

Unexposing

You can leave from the exposing state by clicking anywhere outside the exposed areas or by pressing esc- key from the keyboard. You can also do this programmatically with following function call.

// unexpose programmatically. 
$.unexpose();

You can also supply a function argument to unexpose which overrides onClose callback function supplied in configuration.

Download

Please right click and choose "save link as ..." (or similar)

See version history for this tool.

NOTE. This script depends on jQuery JavaScript library which can be downloaded here. It must be included on the page.

Found a bug?

If you encounter problems in this script please drop a bug report to beta testing forum. If you have a problematic page a direct URL to that page is by far the most effective way of finding bugs.

Submit your plugin