• Page 1 of 1
  • 1
Archive - read only
uCause Community » Trash & Archives » Trash » Div Content Overlay Script
Div Content Overlay Script
SirDarknight(Tonmoy)Date: Tuesday, 2011-07-26, 1:43 PM | Message # 1
Member
Group: Senior Members
Messages: 894
Awards: 10
Reputation: 15
Status: :-(
Step 1: Add the following code to the section of your page:

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="/js/overlaybox.js">

</script>

<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'
       })

       $('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
        speed:300,
        dir:'right',
        opacity:0.8 //opacity: 0 to 1
       })

})

</script>

<style type="text/css">

div#moreinfo{
background:lightblue;
padding:10px;
background:lightblue url(http://img822.imageshack.us/img822/2777/patternl.png);
}

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

</style>


Download OverlayBox.js

Step 2: Add the below sample HTML markup to your :

Code
<h3>Demo 1:</h3>

<div id="info" style="width:250px;border:1px solid gray;padding:15px;background:#eee" data-overlayid="moreinfo">
Your Text Goes Here
</div>

<div id="moreinfo">
<b>Your Text Goes Here</b>

<a href="url">Your Text Goes Here</a>

<a href="url">Your Text Goes Here</a>

<a href="url">Your Text Goes Here</a>

<a href="url">Your Text Goes Here</a>

</div>

<h3>Demo 2:</h3>

<div class="imagecontainers" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://img545.imageshack.us/img545/7775/springo.jpg">
</div>

<div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://img685.imageshack.us/img685/9414/summery.jpg">
</div>

<div class="imagecontainers" data-overlayid="winterinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://img405.imageshack.us/img405/3451/winterjq.jpg">
</div>

<div id="springinfo">
<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

</div>

<div id="summerinfo">
<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

</div>

<div id="winterinfo">
<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

<a href="url">Your Text Goes here</a>

</div>


More Information

To add an overlay box to a DIV, call the jQuery function overlaycontent() on the DIV(s) in question:

Code
$('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:

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:

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

Code
<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>


Code
<div id="moreinfo">
<b>Web Design Resources:</b>

<a href="http://www.dynamicdrive.com">Dynamic Drive</a>

<a href="http://www.javascriptkit.com">JavaScript Kit</a>

<a href="http://www.cssdrive.com">CSS Drive</a>

<a href="http://www.codingforums.com">Coding Forums</a>

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

Code
<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.

Mouseout



Mouseover

tags-zB11Div, Content, Overlay, Script
Attachments: 2916647.jpg(11.3 Kb) · 4373349.jpg(11.2 Kb)


Please Give Me A Award or + Rep If My Post Helps You

Please Give Me A Award or + Rep If You Like my Scripts
 
0 Thanked you For This Useful Post:
uCause Community » Trash & Archives » Trash » Div Content Overlay Script
  • Page 1 of 1
  • 1
Search:


"Making uCoz web designs simple and easy to use"
- uCause Developers