Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fade test</title><script type="text/javascript"><!--
//fades layer out
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
khtml = (document.body.style.KhtmlOpacity);
opac2 = 70;
function fadeOut(elementid) {
if(opac2 > 0) {
opac2-=1;
if(ie5) { document.getElementById(elementid).filters.alpha.opacity = opac2; }
else if (ns6) { document.getElementById(elementid).style.MozOpacity = opac2/100; }
else if (khtml) { document.getElementById(elementid).style.KhtmlOpacity = opac2/100; }
setTimeout('fadeOut(elementid)', 10);
}
document.getElementById(elementid).style.display = "none";
}
// --></script>
<style type="text/css">
.seventy-percent {
color:white;
background-color:#336699;
position:absolute;
width:225px;
height:225px;
/*here's the CSS3 standard method. this works in everything* but IE. */
/*It's in fractions of 1. So 1 is 100% opacity (AKA the default) and .5 is 50% opacity.*/
opacity: .7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
top:20px;
left:20px;
padding:10px;
}
body {
background:url(http://www.example.com/web/samples/transparency/bg.jpg)
}
h1 {
margin-top:75px;
}
</style>
<!-- and now I use conditional comments to slide in the IE specific code.
Since every other browser thinks this is just a comment it keeps all the evil IE-ness
away from other browsers.
-->
<!--[if gte IE 5]>
<style type="text/css">
.seventy-percent {
/*It's a 100 scale. So 100 is 100% opacity (AKA the default) and 50 is 50% opacity.
The worst part of this is not the CSS issues, since this sort of forking is common.
It's coding opacity in Javascript. You always
have to make some second calculation to
make things match across browsers
*/
filter:alpha(opacity=70);
}
</style><![endif]-->
</head>
<body>
<div id="fadethis" class="seventy-percent"><a onclick="fadeOut('fadethis')" href="#">Click and watch</a>This is a div with seventy percent opacity</div>
<h1>This is some text in the background</h1>
</body>
</html>
And it just fades an element. I have it fading the element "fadethis". It works in Internet Explorer, Firefox, and Opera but not Safari (on mac). I'm not sure if the mac thing has anything to do with it but I've heard it can do stuff.
Please, the people using this are using basically nothing but macs ...haha.. and this would be cool to show them if I can get it to work.
TIA!
[edited by: whoisgregg at 7:18 pm (utc) on May 9, 2009]
[edit reason] Exemplified image URL. [/edit]
However, one solution is a lot easier. Instead of doing browser detection, you can safely (at least in the browsers I deal with) just set two different opacity values and it should just work. Try this replacement function:
opac2 = 70;
function fadeOut(elementid) {
if(element = document.getElementById(elementid)){
if(opac2 > 0) {
opac2-=1;
element.style.opacity = opac2/100;
element.style.filter = 'alpha(opacity=' + opac2*100 + ')';
setTimeout('fadeOut(\''+elementid+'\')', 10);
} else {
document.getElementById(elementid).style.display = "none";
}
}
}
