Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

whole page fade effect

seeking javascript onclick effect to fade full-size div

1:38 am on May 21, 2008 (gmt 0)

5+ Year Member

Hi all!

I had a graphic designer ask me about an effect we had seen, but I can not duplicate and/or remember where it was.

Here's a description of what the thing is supposed to do:

1. User clicks a link
2. Semi-transparent effect takes over the screen
3. Requested article/item shows in full color in the middle of the screen

I would think that it would be an AJAX effect where the requested content is pulled from a DB or where ever it might be. Then, it gets loaded into a div/layer that rides over a second layer that is semi-transparent to hide the page itself and bring visual focus to the requested content.

Has anyone seen/done this? If so, could you post a link or a description of how it's done?

Thanks much in advance,


2:32 am on May 21, 2008 (gmt 0)

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Your description sounds about right. It is also possible to do it in a lowtech way with a transparent IFRAME which you switch to visible and set the src for
4:12 am on May 21, 2008 (gmt 0)

5+ Year Member

They are typically called "modals" and there are a number of different scripts and modules that can be implemented very quickly.
10:55 am on May 21, 2008 (gmt 0)

5+ Year Member


Thanks very much for the responses.

Could you describe how the IFrame would be set? In a layer with a higher z-setting or something else?

For the modals/modules, do you have a source/link where I could find these?

Thanks again

12:51 pm on May 21, 2008 (gmt 0)

5+ Year Member

From your description, sounds like you're just describing a lightbox.

Google "lightbox", you'll get tons of examples.

5:58 pm on May 21, 2008 (gmt 0)

5+ Year Member

For a more hands-on/technical solution, I highly recommend checking out the Yahoo User Interface library--especially its Animation tools.

[edited by: WesleyC at 5:59 pm (utc) on May 21, 2008]

1:58 pm on May 22, 2008 (gmt 0)

10+ Year Member

Here is the guts of some code I use for a "Help PopUp". It fades in then out.

It should get you started.

** Sorry if the Alpha/Opacity is coded for IE, I code mostly for a IE only Intranet App.


/* --------------------------------------------------------------------
*Fade functions for Pop Up Help
* --------------------------------------------------------------------*/
var AlphaInterval = true;
var AlphaVal = 0;
var AlphaDir= '';
var AlphaElement;

function fade(elemID,dir)

AlphaDir = dir; // 'in' or 'out'
AlphaElement = document.getElementById(elemID);
document.getElementById("popHelp").style.display = "block";


function setAlpha(elemContent) //var elemContent = document.getElementById("popHelpContent");
AlphaElement = elemContent
AlphaElement.style.filter = "alpha(Opacity=0)";

function applyAlpha()
//AlphaElement.style.filter = "alpha(Opacity=100)";
if(AlphaDir == "in")
if(AlphaVal <= 90) AlphaVal += 5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal == 90)
AlphaDir = '';
} else {
// out
if(AlphaVal != 0) AlphaVal += -5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal <= 0)
document.getElementById("popHelp").style.display = "none";
AlphaDir = '';
/* --------------------------------------------------------------------
*END PopUp Help
* --------------------------------------------------------------------*/

2:12 pm on May 22, 2008 (gmt 0)

10+ Year Member

Found Alpha/Opacity code for other browsers.

// Safari<1.2, Konqueror

// Older Mozilla and Firefox

// Safari 1.2, newer Firefox and Mozilla, CSS3

12:51 am on May 23, 2008 (gmt 0)

5+ Year Member

Many thanks to everyone who responded. I'm relatively new to Javascript and everyone helped a great deal.

Thanks again!


Featured Threads

Hot Threads This Week

Hot Threads This Month