Cut & Paste DIV Content Overlay script
|
Description: This script overlaps any DIV on your page perfectly with an overlay box when the mouse rolls over the former, then hides the box onmouseout. This sliding box can be used to show anything from text to images/ and rich content, and set to slide in from any four sides of the primary DIV beneath it. Each overlay box is simply defined as a hidden DIV on the page, making customizing its contents a breeze.
Examples (roll mouse over below DIVs):
Demo 1 (single content DIV):
Demo 2 (DIVs each containing an image):
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Download overlaybox.js (right click and select "Save As"), the external file referenced by the above code.
Step 2: Add the below sample HTML markup to your <BODY>:
More Information
To add an overlay box to a DIV, call the jQuery function
overlaycontent() on the DIV(s) in question:
$('selector').overlaycontent({
//options
})
where "selector" should be a valid jQuery selector that references the desired DIVs you want to add an overlay box to, and options is a list of supported options from the following, all of which are optional:
| option | Description |
|---|---|
| speed | The speed (duration) of the slide in effect, in milliseconds. Defaults to 300. |
| dir | The direction of the slide in effect. Four possible values are supported: "up", "down", "right", and "left". Defaults to "up". |
| opacity | The opacity of the overlay box that slides on top of the target DIV, where 0=completely transparent and 1=fully opaque. A value of 0.5 for example causes the overlay box to be semi transparent, allowing some of the target DIV's content beneath it to show through. Defaults to 1. |
The below initializes the overlay script on a DIV called "info" on the page:
<script>
jQuery(function($){ //on document.ready
$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
speed:500, //duration of animation in milliseconds
dir:'up' //supports 'up', 'down', 'left', or 'right'
})
</script>
But wait, that's just the first half of the equation. You now
need to define the markup for both the "#info" DIV on your page plus the overlay
DIV that will slide on top of the former onmouseover, and let the script in on
the two's relationship, by way of the data-overlay ID attribute.
Take a look at the below:
<div id="info" style="width:250px;border:1px solid gray;background:#eee" data-overlayid="moreinfo"> Web design is a broad term used to encompass the way... </div> <div id="moreinfo"> <b>Web Design Resources:</b><br /> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a><br /> <a href="http://www.cssdrive.com">CSS Drive</a><br /> <a href="http://www.codingforums.com">Coding Forums</a><br /> </div>
After defining the markup for both DIVs, you "link up" the
primary "info" DIV and sliding "moreinfo" DIV by
inserting the "data-overlayid" attribute inside the former that
points to the ID of the sliding DIV, in this case, "moreinfo". That
way the script knows which DIV to use to overlay on top of the "info"
DIV when overlaycontent() is called on it.
Pitfall to watch out for
This script does not work with any type of content in adding an overlay box to them- it's best used on DIVs, or at the very least container elements. The reason is due to the way the script works its magic- it first relatively positions the desired DIV (to anchor it relative to the overlay DIV), then takes the overlay DIV out of its normal document tree location and into the desired DIV as a child element instead. What this means is that the target elements in which you add this effect to must at the very least be a container element, capable of housing children elements.
So lets say you want to add an overlay effect to an image- in order for it to work, you should first wrap the image in a DIV container, and initialize the script on the DIV and not the image:
<div class="imagecontainers" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px"> <img src="spring.jpg"> </div>
Also notice that I've given this DIV explicit dimensions conforming to the image's, which helps the script know sooner the boundaries it should be working within. Without them the overlay box's dimensions will not be correct until the image has fully loaded.