homepage Welcome to WebmasterWorld Guest from 23.20.91.134
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
whole page fade effect
seeking javascript onclick effect to fade full-size div
corodyne




msg:3654987
 1:38 am on May 21, 2008 (gmt 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

 

vincevincevince




msg:3655002
 2:32 am on May 21, 2008 (gmt 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

venti




msg:3655045
 4:12 am on May 21, 2008 (gmt 0)

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

corodyne




msg:3655159
 10:55 am on May 21, 2008 (gmt 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

Trace




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

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

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

WesleyC




msg:3655565
 5:58 pm on May 21, 2008 (gmt 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]

XtendScott




msg:3656353
 1:58 pm on May 22, 2008 (gmt 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
* --------------------------------------------------------------------*/


XtendScott




msg:3656360
 2:12 pm on May 22, 2008 (gmt 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;

corodyne




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

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

Thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved