Preserved Topic: Opacity effect - Mozilla

I'm a complete newbie to javascript and saw this cool effect at www.razorart.com (the associates section on the left side).

How can i make images do fading in Mozilla? http://playground.spiritual-pixel.com/btsnet/Untitled.html

function opacitychange(i,o)

{

ie5 = (document.getElementById&&document.all)

ns6 = (document.getElementById&&!document.all)



 if(ie5)

  document.getElementById(i).filters.alpha.opacity = o;



 if(ns6)

  {

   document.getElementById(i).style.MozOpacity = o + '%';

  }



}

</script>

I need to get ready for new years but here is a JS that i wrote so you can use to change opacity in both IE and NS. If you just use opacitychange('mylayer',50) then it should work. I hope you can change it around to fit your fading effect.
-dk
P.S. This only works in NS6. NS4 did not have opacity support.

- can't decide? have another drink.

[This message has been edited by dk01 (edited 12-31-2001).]

You can also find the code for this on my web site (take a look at the wallpapers section)..

whoa... I didn't know mozilla did half-transparent layers....

coolness....


"...when I'm high like heaven, when I'm strong like music, 'cause I'm slow like honey and heavy with mood..."
ICQ: 67751342

Yeah and with css you can use:

<style type="text/css">

.opac { filter: alpha(opacity=100);-moz-opacity:100%; }

</style>

-dk

- can't decide? have another drink.

Ok, I have no idea how to do that in mozilla.

Here is my version that still don't work in Mozilla .

I didn't really solve your Netscape problem (only part of it), but I had very much fun while trying to fix it!
I re-wrote the whole thing, and it's working just perfectly well in IE, and I think the main reason that it didn't work in NN was that you forgot to get rid of the % at the end of .style.MozOpacity. Since for Netscape it's "100%", not just "100" like in IE. This is what I managed to change. I also wrote everything using DOM-syntax, it really *should* do the same in both browsers now.... I'm pretty sure there isn't much more left to do. Probably a little thing I didn't see.

I put it all together on a nice little page where you can enter everything that onmouseover and onmouseout send into the function, and the contents of the most important variables is also displayed. That's where I noticed that Netscape tries to set "100-10" as new opacity, instead of 90. But I have no idea how to fix that

Here's the

<script language="JavaScript" type="text/javascript">

fadeObjects = new Object();



isIE = (document.getElementById&&document.all);

isMozilla = (document.getElementById&&!document.all);



// var object, destOp, rate, delta, diff, newOp, currOp;

   

function fade(object, destOp, rate, delta) {

   

   if (isIE) { 

      currOp = document.getElementById(object).filters["alpha"].opacity; 

   }

   if (isMozilla) { 

      currOp = document.getElementById(object).style.MozOpacity.replace(/%/,""); 

   }

   diff = destOp - currOp;

   

   if (currOp > destOp) { 

      direction = -1; 

   } 

   else { 

      direction = 1; 

   } 

  

   delta = Math.min(direction * diff, delta);

  

   newOp = currOp + ( direction * delta );

   

   if (isIE) {

      document.getElementById(object).filters["alpha"].opacity = newOp;

   }

   if (isMozilla) {

      document.getElementById(object).style.MozOpacity = newOp + "%";

   }

   

   

   if (currOp != destOp){

      fadeObjects[document.getElementById(object).sourceIndex]=object;

      setTimeout("fade(fadeObjects["+document.getElementById             // one

      (object).sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);    // line

   }

}

</script>

And the link: www.kussatz.com/asylum/opacity3.html

Tilo



[This message has been edited by kuckus (edited 01-05-2002).]

*bump*

Really no ideas?

Ok, i looked at the code and i cannot find why it will not work in Mozilla

But i am no javascript/dhtml guru....

Something like this:
http://www.whatever.net.au/~cameron/ozone/fadescript/

Umm.. Actually, this does work well in IE and Mozilla with an exception. Things start to screw up when you have more than one element that you want to fade in and out. I've tried to re-structure the code to see if I could fix the problem but I'm still not having any luck.

I don't know all of the in's and out's of Javascript's setTimeout() & setInterval() functions. Espicaly when it comes to having multiple instances running at the same time. Maybe one of the JS gods will drop by and help out a bit.

Here's my second attempt : http://www.whatever.net.au/~cameron/ozone/fadescript/index2.html where you can see the problem I'm talking about. Even with my old code it still did this.

poo!

Maybe it is better you use 'aniOpacity('imagename',100,10)' instead of aniOpacity(this,100,10).

u-neek: I just tried the way you suggested, doesn't work either.

Ok, I know how to fix my script now But I don't have time too as I need to run off to work.

I'll do it when I get home tonight.

Hey i was just wondering if someone has an explaination of why you need delta in that script?

- can't decide? have another drink.

Ok I got the Razor Art opacity script working for NS and IE. Unfourtunately it only works for going upwards (from 30 to 100) in opacity in NS. In IE it works fine both up and down. I'm not quite sure why but any help would be appriciated. Check it out here.

Some of the changes were:
- Adding in a -moz-opacity:30% style definition.
- Adding in a change for the opacity in NS with %.
- Changing the check from "[object]" to "[object HTMLImageElement]" in NS

Enjoy so far. If you can fix it please let me know.
-dk

- can't decide? have another drink.

btw.. anyone know why my number of posts aren't going up?
Who's stealing them!!! I'll hunt you down i swear. lol
-dk

- can't decide? have another drink.

You have the same problem in your script as Dracusis mentioned above. Move over the image with 30% and then over the other...

Well, my idea for fixing this problem didn't work but I have yet another idea. Although this one will take a little while to code. It's also likely to be quite system intensive depending on how many elements you wish to use it for.

If all else fails I could write a script that will animate the opacity for IE but just flick between transparent and opace <-sp? for NN6/Mozilla (Not animated). This would solve many problems as I could use filter transitions for IE, thus removing the need to use any setTimeout() function. Which is what's screwing it up at the moment. I've even tried tracking the setTimeout's with flags and preventing another one from starting untill the other has finished it's repetitions but that didn't work either.

3rd attempt, still buggy.

I'll try again when I get home from work.



Edit: Link-e-poo

[This message has been edited by Dracusis (edited 01-16-2002).]

dk01: the meaning of delta

example: delta=10, destOp=100, current Opacity=50 --> the image's opacity will be changed like this:
from 50%, it's first changed to 60%, then 70%, 80%, 90%, 100%. If delta was 5 it would have been 50 - 55 - 60 - 65 - 70 and so on.

Did this help?

ya thanks kuckus got it
-dk

- can't decide? have another drink.