Smooth Overlay

The jQuery tools available for Website development are like a cookbook full of wonderful recipes to try.  This one is called Overlay, an element (pop-up box) that overlays the web page that you are currently on.  There are three adjustable components to add to your code:  a little javascript, some html code for the overlay and the trigger, and then a liberal sprinkling of CSS.

First, select the trigger element (the html <a> tag) and enable overlaying with a little javascript:

<script>
$(function() {
$(“.triggers a[rel]”).overlay();
});
</script>

Second, define the trigger.  My trigger is when the user clicks on my image, comment-bubble.png the overlay element in the rel attribute is referenced.

<a rel=”#comment-box”><img src=”{proj_path}/images/comment-bubble.png”/> </a>

Then, add the html code that defines the rel element which as you can see above,  is a div named comment-box.  This is what will appear in the overlay.

<div id=”comment-box” class=”apple_overlay black”>
this is where you insert all of your code.  my code displayed beholder comments on a particular piece of art on a art website
</div>

Now some CSS to taste.  Define the styling for your overlay.

<style>
.apple_overlay {
display:none;
background-image:url(“{proj_path}/images/overlay/white.png”);
width:640px;
padding:35px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image:url(“{proj_path}/images/overlay/close.png”);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}

div.apple_overlay.black {
background-image:url(“{proj_path}/images/overlay/transparent.png”);
color:#fff;
}

</style>

Here’s what it looks like on the site we’re building

image of overlay box

After clicking on the speech bubble the user sees the pop-up overlay.

 

 

 

 

 

 

Find this tool and more at: http://flowplayer.org/tools/index.html

Advertisements

~ by lamiak on January 5, 2011.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: