Staredit Network

Staredit Network -> Computers and Technical -> "Fading" effect

Report, edit, etc...Posted by O)FaRTy1billion on 2006-06-16 at 14:42:02

I am trying to make a page with an iframe that "fades" in using opacity.. except I have stumbled upon a problem: I am not exaclty sure how to do "-moz-opacity:blah;" as a script. I got IE's filter thing to do it just fine, but everything I try with Fx will do nothing except complain.

Report, edit, etc...Posted by Centreri on 2006-06-16 at 18:02:51

It's CSS, not Javascript.

CODE

-moz-opacity: .75;

Is one example. I'm quite sure that means its 75% visible, though it may mean 75% invisible.. meh. Experiment.

Report, edit, etc...Posted by O)FaRTy1billion on 2006-06-16 at 23:29:55

I already know how to do that.. I mean using JavaScript. I do know the difference

This is my script for IE:

CODE

Edit:
Some of the stuff in there (such as the "trans" variable and "return 0;" line was doing some things and testing some things in Fx)

Report, edit, etc...Posted by Centreri on 2006-06-17 at 11:41:56

Can't help then, sorry. I hardly know any Javascript. I think if editing over Javascript, the -moz-opacity: thing will work the same way.

Report, edit, etc...Posted by O)FaRTy1billion on 2006-06-17 at 17:41:25

Except it doesn't use '-'s.. it does . instead, but ..moz.blahblah wont work.

Report, edit, etc...Posted by Syphon on 2006-06-18 at 22:07:30

Have several different CSS oppacity classes, then use a script to time the change of the HTML for the iFrame from the least opaque class to fully opaque by removing the class setting completely.

Report, edit, etc...Posted by O)FaRTy1billion on 2006-06-18 at 22:35:16

Yes, I will make 20 classes when I already have more than half of it done.

Report, edit, etc...Posted by Syphon on 2006-06-19 at 16:04:08

QUOTE(O)FaRTy1billion @ Jun 18 2006, 09:34 PM)

Yes, I will make 20 classes when I already have more than half of it done.
[right][snapback]509251[/snapback][/right]

Making a class takes ever so long, doesn't it?

.opq1 {blahblah;}
.opq2 {blahblah;}
.opq3 {blahblah;}
.opq4 {blahblah;}
.opq5 {blahblah;}
.opq6 {blahblah;}

Etc.

If you're going to complain about my method complain about how big the script to systematically change the HTML would be

Anyway, this'd work easier?

Make just one class with like .25 as the starting opacity instead of using an external .CSS file put it on the page, use javascript to increase the number at timed intervals. Roughly the same size script, less classes. Hmm...

Report, edit, etc...Posted by Doodle77(MM) on 2006-06-19 at 16:19:14

CODE

<body onload="setInterval('fade(\'fadey\',.05)', 250);">
<div id="fadey" style="opacity:1;">OMG Fading!!!!</div>NotFading
<script>
function fade(elemid,fadeby) {
if (document.getElementById(elemid).style.opacity > 0) {
document.getElementById(elemid).style.opacity = document.getElementById(elemid).style.opacity - fadeby;
}
}
</script>
</body>

That is the correct, standards compliant way to do it. I dont think it works in IE because IE is not standards compliant. It works in every other browser in existence that has support for CSS2 and Javascript.
heh that was fading out.

CODE

<body onload="setInterval('fade(\'fadey\',.05)', 250);">
<div id="fadey" style="opacity:0;">OMG Fading!!!!</div>NotFading
<script>
function fade(elemid,fadeby) {
if (document.getElementById(elemid).style.opacity < 1) {
document.getElementById(elemid).style.opacity = document.getElementById(elemid).style.opacity + fadeby;
}
}
</script>
</body>

thats fading in.

Report, edit, etc...Posted by O)FaRTy1billion on 2006-06-19 at 17:45:36

I already made a script that works in IE and FireFox, its just I can't figure out the opacity thing for FireFox.
So just do object.style.opacity?

EDIT:
It uses #.##, right?

EDIT:
Omg! It works! Thanks.

Next Page (1)