Welcome to WebmasterWorld Guest from 54.226.133.245

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)

New User

5+ Year Member

joined:May 21, 2008
posts: 6
votes: 0


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

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

Senior Member from MY 

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

joined:Apr 1, 2003
posts:4847
votes: 0


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)

Junior Member

5+ Year Member

joined:Jan 7, 2008
posts:164
votes: 0


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)

New User

5+ Year Member

joined:May 21, 2008
posts: 6
votes: 0


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

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

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


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)

Full Member

5+ Year Member

joined:July 13, 2007
posts:235
votes: 0


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)

Full Member

10+ Year Member

joined:June 12, 2003
posts: 342
votes: 0


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

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

Full Member

10+ Year Member

joined:June 12, 2003
posts:342
votes: 0


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;

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

New User

5+ Year Member

joined:May 21, 2008
posts:6
votes: 0


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

Thanks again!