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

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

JavaScript and AJAX Forum

How do you 'fade in' a whole layer and contents?
css? javascript?

 2:26 pm on Dec 9, 2002 (gmt 0)

Has anyone any idea as to how I could load my webpage showing a <div> layer being invisible and then progressing to 90% opacity onload?

Any help appreciated.



 2:44 pm on Dec 9, 2002 (gmt 0)

There are some Microsoft filters and transitions [msdn.microsoft.com] that will achieve this for you - but be wary of the distinct lack of browser support. In non-IE browsers, the layer will be rendered day 1 with full (100%) opacity.


 2:48 pm on Dec 9, 2002 (gmt 0)

I've seen such tricks with javascript - but they don't apply to an entire div. If you need an image to fade in, you actually need a whole bunch of different images. You load them into an array - and then cycle through the array to create the fade-in illusion.

Fade-in text requires you to cycle through a series of text colors. And I think there were also some proprietary IE functions along these lines - but they sure weren't cross browser. With AOL going toward Gecko and who-knows-what for DOM support, I sure wouldn't write any proprietary code right now.

The problem is, you can create the illusion of a fade-in, but in reality, that's not what's going on. So I'm at a loss as to how you would fade-in an entire div.


 3:14 pm on Dec 9, 2002 (gmt 0)

I have seen pretty much what you are looking while browsing the web .... having a page fade-in on load. I wish I would have checked the source but did not because I assumed it was Flash.


 5:09 pm on Dec 9, 2002 (gmt 0)

right as usually happens, you carry on looking around the internet and find the answer:


<script language="JavaScript">
//fades layer in
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;

function fadeIn() {
if(opac!= 100){
if(ie5) document.getElementById('nameoflayer').filters.alpha.opacity = opac;
if(ns6) document.getElementById('nameoflayer').style.MozOpacity = opac/100;
setTimeout('fadeIn()', 50);

<body onLoad="opacIn(); fadeIn(); fadeOut();">

<div id="nameoflayer" style="position:absolute; left:100px; top:150px; width:100px; height:100px; clip:rect(0,100,100,0); filter: alpha(opacity=0); -moz-opacity:0%; background-color:red; z-index:1">



 5:32 pm on Dec 9, 2002 (gmt 0)

MozOpacity, eh?

I guess they're gunning for Redmond, else why create another piece of propietary but duplicate code.


 5:43 pm on Dec 9, 2002 (gmt 0)

That's interesting, thanks Googly - works in all the DOM1 browsers except Opera.

Could these new Moz code chunks could indicate the kicking off of another browser type war, with Moz and IE based browsers giving us different tidbits of code unique to their Gecko?


 10:53 am on Dec 10, 2002 (gmt 0)

It doesn't seem to work in Mac IE 5.1

Does anyone have any idea of how to make it work?



 11:51 am on Dec 10, 2002 (gmt 0)

Feel free to post a solution to my last question. However I have just realised that ideally for me, this fade script should not work in Mac IE 5.5

It is because the content which I am fading in doesn't work on the Mac anyway. So now the Mac User is just left with a lovely logo instead.

(Please don't get angry all you Mac users!)

Thanks for your views folks.



 10:35 pm on Dec 10, 2002 (gmt 0)

Googly, can you sticky me with the URL you are doing this on? I'd love to see this in action.


 12:39 am on Dec 11, 2002 (gmt 0)

tedster: This is from the www-style@w3.org discussion list:

FYI: the "-name-" prefix is the officially sanctioned mechanism for adding experimental or proprietary keywords to CSS. [...]
Many mozilla extensions, like opacity and border-radius have been proposed to become part of the standard and are considered experimental implementations. The "-moz-" prefix will be dropped (but still supported for backward compatibility) when/if it becomes part of the standard. Another benefit of having the prefixed version is that the CSS committee is free to modify the syntax or behavior of
the property when adding it to the spec and legacy stylesheets will still work against the prefixed version. [...]

So '-moz-opacity' isn't really a branching, but an attempt to create a standarized property without stepping on anyone's toes.

IEs 'filter' predated Mozilla's opacity as well as the prefixing mechanism for extensions. It has been proposed for inclusion in the standard (and rejected in its current form) several times.


 12:52 am on Dec 11, 2002 (gmt 0)

Thanks c3oc3o - that's good information.

There needs to be a "standard" way to innovate. Glad to know that Moz is making sense.


 1:39 am on Dec 11, 2002 (gmt 0)

yeah mozilla's opacity works *nearly* as well.

One thing to note though. If you are running a fairly fast setTimeout routine (and incrementing the fade with a small amount, but in rapid succession) then you will see much better performance on a Win System using IE (unsurprisingly) than using Mozilla.

ALso, on my 1.8 ghz , 1GB ram computer, using linux, it seemed that the mozilla on there was also rendering it rather sluggishly. When I run this same comp in windows, it can run the opacity routine well in mozilla/phoenix or IE.
And of course, using the fade-in is simply not very-standards compliant.

And yes, the filters only work on images, not divs. but its not too hard to make it appear that a div is whats being altered.

One wedding website i worked on works on either mozilla or IE . I'm not going to post it cuz thats bad right? Cna i make it my homepage at least? (cuz thats what I did) Going in and out of the links section on the left causes the routine to run. Beware, the ads geocities throws in make it a mess sometimes.

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