whole page fade effect

seeking javascript onclick effect to fade full-size div

[corodyne]

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,

Chris

[vincevincevince]

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

[venti]

They are typically called "modals" and there are a number of different scripts and modules that can be implemented very quickly.

[corodyne]

Vince/Venti,

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

[Trace]

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

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

[WesleyC]

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]

[XtendScott]

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.

scott

/* --------------------------------------------------------------------
 *Fade functions for Pop Up Help 
 *         
 * --------------------------------------------------------------------*/ 
var AlphaInterval = true;
var AlphaVal = 0;
var AlphaDir= '';
var AlphaElement;
function fade(elemID,dir)
{
clearInterval(AlphaInterval);
AlphaDir = dir; // 'in' or 'out'
AlphaElement = document.getElementById(elemID);
document.getElementById("popHelp").style.display = "block";
 
AlphaInterval=setInterval("applyAlpha()",15);
}
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")
{
//in
if(AlphaVal <= 90) AlphaVal += 5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal == 90) 
{ 
clearInterval(AlphaInterval); 
AlphaDir = ''; 
}
//
} else {
// out
if(AlphaVal != 0) AlphaVal += -5;
AlphaElement.style.filter = "alpha(Opacity="+AlphaVal+")";
if(AlphaVal <= 0) 
{ 
clearInterval(AlphaInterval); 
document.getElementById("popHelp").style.display = "none"; 
AlphaDir = '';
}
}
}
/* --------------------------------------------------------------------
 *END PopUp Help      
 * --------------------------------------------------------------------*/
 
 

[XtendScott]

Found Alpha/Opacity code for other browsers.

  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity=opacity/100;
  // Older Mozilla and Firefox
  obj.style.MozOpacity=opacity/100;
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity=opacity/100;

[corodyne]

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

Thanks again!