Cross browser support for colour fading

Forum Moderators: open

Message Too Old, No Replies

Cross browser support for colour fading

Does it exist?

trillianjedi

11:37 am on Jun 30, 2005 (gmt 0)

Hey guys,

I want to create an effect on a page whereby some DIV's (think of coloured blocks) cross fade from one background colour to another colour.

Is this possible to do with Javascript and retain cross-browser support?

I've seen some scripts for doing background/text fades etc, and can probably adapt one. One of the scripts I found works in both IE and FireFox (haven't tested opera or any of my Linux browsers yet).

Is this a real problem still, or do we basically have decent compatability for this sort of stuff these days?

I essentially want to give a little animation to something without having to go the Flash route, but it will become a fundamental element of the design, so if it's going to break in Opera (for example) I'll need a plan B.

Thanks,

Nutter

2:59 pm on Jun 30, 2005 (gmt 0)

There is one at brothercake.com - hope you don't mind a link, it's not my site - called transitions. It basically sniffs the browser type and steps through the opacity in different methods depending on browser and drops back to simply swapping if a suitable browser is not detected. I've tried it in IE and FF and have been told that it works in Safari and IE-Mac.

There is another that does a smoother job and can be adapted to any object, not just img, but I'm at work and can't find the link. I'll post it later if you're interested. This second one also has the ability to just fade in or just fade out and you can start and stop at different opacities - ex: you can fade from 100% to 50% and back to 75% if you want.

trillianjedi

3:26 pm on Jun 30, 2005 (gmt 0)

Thanks Nutter ;-)

In consideration of the TOS, I'd really appreciate it if you could sticky the other link if you find it.

Thanks!

trillianjedi

6:43 pm on Jun 30, 2005 (gmt 0)

Hmmm.... I've just realised - I can't use the opacity function - I want the text inside the DIV to remain visible, I just want to change the background colour.

I don't need to do a fade, I just need to switch it.

mincklerstraat

1:21 pm on Jul 1, 2005 (gmt 0)

If you don't use opacity this is pretty simple and is unlikely to cause cross-browser issues. I just cranked one out for you that works in ff, opera, and konqueror, and can't imagine it making problems for ie. It uses a flag to check what the color is currently set to instead of checking the style property directly, since it's possible browsers record this differently - i.e., ff always converts it to rgb, so if you check for a hex value it always gives you false.

You can use the same "onclick" attribute on an image if you want.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <title>Bg colorswitch</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
<script type="text/javascript">var flag = 0;</script> 
<span onclick="el=document.getElementById('switch'); if(flag == 0){ el.style.backgroundColor='#fff'; flag = 1; } else {el.style.backgroundColor='#fcc'; flag = 0;}"  
style="cursor: pointer"> 
switch 
</span> 
<div id="switch" style="background-color: #ccc;">Donec pulvinar. Cras ut tortor a orci imperdiet consequat. Duis vehicula massa eget sem. Fusce a quam. Phasellus dignissim lobortis dolor. In posuere. Mauris mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eros turpis, congue id</div> 
</body> 
</html>

trillianjedi

3:43 pm on Jul 1, 2005 (gmt 0)

Mincklerstraat, fantastic - many thanks, I can adapt this to do exactly what I need. Brilliant.

Works in IE as you anticipated, also.

Can that span code be put in my external CSS file?

Thanks,