JQuery_ Novice to Ninja - Earle Castledine [69]
Sliding Overlay
Translucent sliding overlays have been popping up all over the place of late: from message dialogs, to shopping cart summaries, to navigation controls, and more. The reason for their popularity is simple: they look incredibly cool—like the highly questionable interfaces from action movie computer scenes—except that they’re actually useful!
The most important factors to consider in the creation of the sliding overlay are where you want the contents to slide from, and how the overlay will be triggered. The choices will affect how the user interacts with the control and how they expect it to act. This type of control is fairly new to the Web—so there are no conventions you need to adhere to—but you can look for analogies on the desktop for how they should perform. Perhaps you’ll create a version of it that actually sets some rules!
For example, you might like to include a content panel that slides out when the user moves the mouse close to the edge of the page—like the auto-hide taskbar or dock on many operating systems. Or perhaps moving over the bottom edge of the content area could cause a Next/Previous control to slide into view.
Our overlay will be triggered by moving the mouse over a Shopping Cart link. Mousing over the link will cause a menu to slide down from under the header, over the page, informing the user of the number of items currently in the shopping cart, and providing links to checkout or view the cart. As illustrated in Figure 5.9, the shopping cart icon that acts as the trigger is located in the top-right corner of the content area.
Figure 5.9. A sliding shopping cart overlay
As always, styling provides the real base of our effect. This will determine what our trigger will look like, and where our sliding commences. Our trigger will be absolutely positioned in the top-right corner of the page contents:
chapter_05/16_sliding_overlay/panel.css (excerpt)
.cart a {
position: absolute;
width: 32px;
height: 32px;
right: 15px;
top: -10px;
background: transparent url(shoppingcart.png) no-repeat 0 0;
text-indent: -9999px;
}
.cart a:hover, .cart-hover {
background-position: 0 -32px;
}
#overlay {
position: absolute;
width: 100%;
height: 100px;
top: 0;
left: 0;
color: #fff;
background-color: #000;
display: none;
text-align: center;
}
#overlay a {
font-size: 130%;
font-weight: bold;
}
Because the overlay will only be triggered by jQuery, it stands to reason that it should be added to the page markup with jQuery as well. The overlay is set up to be 100% width of the page, and have a height of 100 pixels. We want the overlay to slide down from the top, so we set the top position to 0. Of course, we also hide it so that it’s absent from the page when it loads.
The first step is to add the overlay to the markup. We will give it a hover handler, because when it slides into the page we want it to remain visible for as long as the user keeps the mouse over it. We give it a class of active as long as it’s open, and use that class to determine when it needs to be closed. When the user mouses away from it, we remove the class, and set a timer, which will look for an overlay without the class class and close it after a little less than a second. This way, if the user re-opens the overlay while the timer is running, the timer method will do nothing:
chapter_05/16_sliding_overlay/script.js (excerpt)
$('
').attr('id', 'overlay')
.css('opacity', 0.65)
.hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
setTimeout(function() {
$('#overlay:not(.active)').slideUp(function() {
$('a.cart-hover').removeClass('cart-hover');
});
}, 800);
}).appendTo('body');
We’re using the opacity CSS property to make our overlay semi-transparent. opacity values range from 0 to 1, with 1 being completely opaque and 0 being invisible.