Welcome to WebmasterWorld Guest from 54.147.44.13

Forum Moderators: open

Message Too Old, No Replies

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

css? javascript?

     

Googly

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

Inactive Member
Account Expired

 
 


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.
Googly

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

Senior Member

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

joined:Feb 25, 2002
posts:3185
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2133
votes: 1


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.

Googly

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

Inactive Member
Account Expired

 
 


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

<html>
<head>

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

function fadeIn() {
if(opac!= 100){
opac+=1;
if(ie5) document.getElementById('nameoflayer').filters.alpha.opacity = opac;
if(ns6) document.getElementById('nameoflayer').style.MozOpacity = opac/100;
setTimeout('fadeIn()', 50);
}
}
</script>
</head>

<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">
</div>

</body>
</html>

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

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Senior Member

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

joined:Feb 25, 2002
posts:3185
votes: 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?

Googly

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

Inactive Member
Account Expired

 
 


It doesn't seem to work in Mac IE 5.1

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

Googly

Googly

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

Inactive Member
Account Expired

 
 


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.

Googly

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

Junior Member

10+ Year Member

joined:Dec 26, 2001
posts:148
votes: 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)

Junior Member

10+ Year Member

joined:July 13, 2002
posts:133
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 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.