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

JavaScript tool overlay Overlay your HTML with eye candy

Introduction

jquery.overlay is a JavaScript tool that you can use to place any HTML content on top of the page in a way that looks similar to Apple's great looking overlays. Click on these demos.

white petrol custom custom 2 apple video external url

Benefits

In contrast to other solutions available this tool has following benefits.

1. you can show any HTML - not just images as most other solutions do
2. overlaying is done in a visually appealing way by growing an image from 0 to desired size. This differs from "normal" overlays that do only overlaying of static DIV's.
3. it does only what it is supposed to do and nothing else. If you want to overlay an image slideshow you take a different tool for that and use this tool for overlaying. That is how great programs are done.
4. looks and behaviour are 100% controlled with CSS and this tool does not do anything unpredictable. If you master CSS you can make wildly different overlays.
5. It's very easy to setup multiple overlays on the same page.
6. natural, standards based syntax. no clutter and surprises.
7. file size is ridiculous 2.5 Kb
8. code passes Douglas Crockford's The JavaScript Verifier as all proper JavaScript should and it it doesn't assign any global variables.

Usage

Here we introduce you the principles of setting up and customizing your overlays. Here you can see an overlay example as a standalone page without any redundant HTML and stuff so you can learn by example.

1. Choose a background image

First you need a background image that is used as the growing background. Here are few sample backgrounds that were used on the previous examples.

gray, petrol, white

You can use any background image with this tool. However PNG format can give you those neat shadows because it supports alpha transparency. GIF and JPG cannot do that.

2. Setup content

Second you need a HTML element that is used as the overlayed content.

<!-- 	
	wrapper element for the overlayed content.
	setup it's background image normally with CSS.
-->
<div id="myOverlay" style="background-image:url(overlay.png);">
	
	<!-- the content. can be any HTML such as images, forms and Flash  -->
	<p>Hello, World!</p>
	
</div>

Note: you cannot set background image with external stylesheet because it cannot be recognized in Internet Explorer.

3. Style your content

Overlay is positioned absolutely so elements inside it can be positioned absolutely relative to the overlayed element. This is how CSS works. This makes it easy to position close button on the corner you want. Here we put it on top-right corner.

/* 
	overlay dimensions are defined with CSS. this tool detects them dynamically  
	and resizes the background image correspondingly
*/
#myOverlay {	
	width:500;
	
	/* overlay is initially hidden */
	display:none;	
}

/* 
	close button (div.close element) is auto-generated by default. 
	here it is positioned on top-right corner 
*/
#myOverlay div.close {
	background:url(img/close.png) no-repeat;
	position:absolute;
	top:15px;
	right:10px;
	width:25px;
	height:25px;
	cursor:pointer;	
}

/* 
	the actual content is moved little bit inside so that it doesn't overlap
	with the drop shadow in the overlayed image
*/
#myOverlay p {
	color:#567;
	font-size:50px;
	margin:110px 135px;
}

4. Trigger your overlay

Overlays are triggered with an A tag using follwing syntax.

<!-- rel- attribute defines which HTML element is overlayed -->
<a rel="#myOverlay">Open overlay</a>

Inside this A tag you can have anything such as images, text and buttons. Here is a minimal syntax for activating those overlay links

$("a[@rel]").overlay();

Of course you can use a different selector. A clean solution is to assign a class name to each overlayed link and then select them by: $("a.myClassName")

5. closing the overlay

Overlay is closed when user presses our close button or by pressing ESC key or clicks outside the overlayed area. You can also close it programmatically by calling $.overlayClose();.

Options

A simple syntax is to give a single attribute which is a path to the background image. You can also give it as an object and here are all options and their default values that this object can have

$("jquery selector").overlay({
	
	// a position where overlay is placed. this is added to the current scroll position
	top: 100,
	
	// the time in milliseconds how long the background image grows 
	speed: 500,
	
	
	/*
		this callback function is triggered before the growing animation
		returning false in the callback prevent's it from loading
	*/
	onBeforeLoad: null,
	
	// this callback function is triggered when animation is done and overlay is in place
	onLoad: null,

	/*
		this callback function is triggered when overlay is closed
		returning false in the callback prevent's it from closing
	*/
	onClose: null,
	
	// clicking outside the overlay close it. by setting this to false doesn't do it
	closeOnClick: true,	
	
	/*
		if this is null close button is auto-generated, 
		see below how to make custom buttons.
	*/
	close: null	
});

Callback function is fed with three arguments as follows

1. overlayed content
2. link that triggered overlay
3. close button

Each argument is supplied as jQuery object. Additionally this- variable is a pointer to the overlayed image.

Custom close button

By default close button is auto-generated as the first element inside container. It's HTML is following

<!-- auto- generated close button -->
<div class="close"></div>

You can make custom close buttons inside container and style/position them anyway you like. You can even have many of them. In order to make them work you need to activate them with close property as follows.

$("a.overlay").overlay({

	// supply a jQuery selector here for the element that act as close button
	close: 'img.close'	
});

After that close buttons are not auto- generated.

Example Multiple overlays

Here we will show you the priciples of having multiple overlays on the same page.

<!-- here we have two overlays. styling is not discussed here -->
<div id="demos">
	
</div>

<div id="help">
	
</div>

<!-- here we have links that open up those overlays. -->
<a class="overlay" rel="#demos">Show demos</a>

<a class="overlay" rel="#help">Show help</a>

<!-- finally we activate those links -->
<script>
$("a.overlay").overlay();
</script>

Example Overlay external pages

Sometimes you want to load data from external pages to your overlay. Here is one solution for achieving this. We will have follwing (standard based) syntax for loading external pages.

<!-- href- attribute defines our external content (as usual!) -->
<a rel="#myOverlay" href="http://flowplayer.org/tools/overlay-test.html">Show me</a>

We will setup this onLoad one-liner function that does all the magic.

$("a[@rel]").overlay({

	// look how this- variable and anchor argument are cleverly used 	
	onLoad: function(content, link) {
		content.find("p").load(link.attr("href"));
	}
});

Our example uses P- tag as the wrapper for external content. However this is not recommended if you are including complex HTML. You should change it to DIV tag. Follwing example will load content from this file.

Show me

Example 2 Exposing overlays

You can easily overlay you content together with our jquery.expose tool. Click on the "video" example on top of this page and you see what it does. The surroundings of the overlay are darkened so that the overlay stands out better. Here is how it's done.

$("a#myLink").overlay({
	
	// setup exposing when overlaying starts
	onBeforeLoad: function() {
		this.expose();	
	},				
	
	// cloase exposing
	onClose: function(content) {
		$.unexpose();
	}
	
});

That's it.

Browser support

• Firefox 1.5/2.0+
• Internet Explorer 5.5/6.0/7.0+
• Safari 2.0+
• Opera 9.0+

NOTE: IE versions below 6 do not support png transparency. This can be fixed with jquery.ifixpng. Personally I haven't tried that plugin. If you have better solutions please contact me via support@flowplayer.org.

Download version

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 bug raporting 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