Categories:

Home / Free JavaScripts / Content Management scripts / Here

Cut & Paste DIV Content Overlay script

Credit: JavaScript Kit

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):

Web design is a broad term used to encompass the way that content (usually hypertext or hypermedia) is delivered to an end-user through the World Wide Web, using a web browser or other web-enabled software to display the content.

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.


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.