Overlays are a significant part of the JavaScript landscape—if you want to direct a visitor's attention to a specific element on your site, then this tool will achieve this to great effect. Overlays can be used to display virtually anything, such as different styles of overlays for displaying products, showing information or warning boxes, or to display complex information these are all possible with jQuery Tools' Overlay.
jQuery Tools' Overlay can contain all sorts of information, such as videos, images, maps, and the like —everything can be styled using CSS. It has a variety of features, such as a scripting framework, event model (to perform an action when an event is triggered), as well as adding custom effects.
The general way to set up an overlay is as follows:
// select one or more elements to be overlay triggers
$(".my_overlay_trigger").overlay({
// one configuration property
color: '#ccc',
// another property
top: 50
// ... the rest of the configuration properties
});
When you click on one of the triggers it will open an overlay that is being specified by the trigger's rel attribute.
Tip
It is worth having a look at http://flowplayer.org/tools/overlay/index.html, which details all of the possible configuration options available for use with an overlay.
Let's see how this works in practice—we will build a simple map viewer that uses Google™ Maps, and the Apple effect from overlay.
We're going to use this concept to develop a lightbox effect, which uses Google™ Maps, for a client who needs to provide a map of where his office is, but doesn't want to settle for a plain map on a page!
This example will use the Overlay tool from jQuery Tools, but with the "Apple" theme. All of the images used in the example are available in the code download that accompanies this book.
Remember the code template we set up at the beginning of this chapter? Grab a copy of it now and save this as your overlay project file, so that we can then add in the meat of the overlay demo. We will make one small change to it though—alter the<body> tags to read as this:
<body class="no-js"> ... </body>
The reasons for this will become clearer as we progress through the demonstration.
Next, let's add the code for the overlay trigger and overlay to the<body>:
<!-- trigger elements --> <a href="#link1" rel="#link1">Location of Packt's Office</a> <!-- overlayed element --> <div class="apple_overlay" id="link1"> <iframe width="675" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=B3+2PB&hl=en& sll=52.483277,-1.900152&sspn=0.003679,0.009645&vpsrc=0& t=m&ie=UTF8&hq=&hnear=Birmingham,+West+Midlands+B3+2PB, +United+Kingdom&ll=52.484296,-1.90115& spn=0.015681,0.025749&z=14&iwloc=A&output=embed"> </iframe> <p>Packt's office in Birmingham</p> </div>
This follows the normal overlay and trigger structure required for an overlay, but with the addition of the<iframe> markup, to handle external content. The trigger here is the<a> markup which, when clicked, opens the map showing the location of Packt's office and displays it in the overlay.
The next part to add in is the all-important script—although the code that calls the overlay functionality is only one line, we have to add a block of configuration code that tells it to use expose to hide the page contents, then show the overlay itself, and finally to find the URL given in the overlay HTML, and show this on screen.
Add the following code at the bottom of your web page, before the</body> tag:
<script>
$(function() {
$("a[rel][href!='']").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#000',
loadSpeed: 200,
opacity: 0.8
},
effect: 'apple',
onBeforeLoad: function() {
var overlaid = this, overEl = this.getOverlay();
// grab wrapper element inside content
overEl.find(".contentWrap").load( this.getTrigger().attr("href"));
overEl.appendTo("body");
$(".close", this.getOverlay()).click(function(e){
overlaid.close();
});
}
});
});
</script>
Finally, we need to add some styling, as the resulting page won't look very pretty! The following code is crucial for showing the overlay, you can always change the backgrounds being used, if you want to have a different color of overlay:
<style>
/* body, a:active and : focus only needed for demo; these
can be removed for production use */
body { padding: 50px 80px; }
a:active { outline: none; }
:focus { -moz-outline-style: none; }
.apple_overlay {
/* initially overlay is hidden */
display: none;
/* growing background image */
background-image: url(white.png);
/* width after animation - height is auto-calculated */
width: 675px;
/* some padding to layout nested elements nicely */
padding: 25px;
margin: 20px;
}
/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image: url(close.png);
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
height: 35px;
width: 35px;
}
#overlay {
height: 526px;
width: 675px;
}
div.contentWrap {
height: 526px;
width: 675px;
overflow: hidden;
}
a, body {
font-family: Arial, Tahoma, Times New Roman;
}
body.no-js a[rel] {
/* initially overlay is hidden if JavaScript is disabled */
display: none;
}
body.js .apple_overlay {
/* initially overlay is hidden if JavaScript is enabled */
display: none;
}
</style>
Tip
It is worth noting that if you want to change the background, there are some additional backgrounds available from the jQuery Tools website at http://flowplayer.org/tools/overlay/index.html, or in the code download that accompanies this book. You can always add your own instead—have a look at some of the demos on the site to see how to do this.
Notice how we used no-js in the original HTML markup? The reason for this is simple: it maintains progressive enhancement, which means that if someone has JavaScript turned off, the overlay will still be hidden until you click on the trigger link!
The overlay will work now, you will see something similar to the following image:
This only scratches the surface of what can be done with an overlay. You could add your own custom effects, set to show as a modal dialog, or even show different images as your "overlay", which could be enlarged versions of smaller images, such as a book.