PDA

View Full Version : How can you dynamically change CSS attribute -moz-opacity?



python1340
10-21-2007, 09:43 PM
How can you dynamically change CSS attributes that begin with a hyphen such as "-moz-opacity" ???

The normal way gives a syntax error:

myimage.style.-moz-opacity = 0.99;

Ideas?

Kenny
10-21-2007, 11:37 PM
This is a cross-browser script, see if you can make any sense of it?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fading images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#FDFEFC;
color:#fff;
}
#container {
position:relative;
width:174px;
height:182px;
border:5px double #f3d64e;

margin:100px auto;
}
#top {
position:absolute;
width:174px;
height:182px;
z-index:1;
}
#bot {
position:absolute;
width:174px;
height:182px;
z-index:0;
}
</style>

<script type="text/javascript">
var objt;
var objb;
var topop=100;
var botop=0;
var speed=50;
var topnum=0;
var botnum=1;
var test=0;

window.onload=function() {
objt=document.getElementById('top');
objb=document.getElementById('bot');
fadeout();
}

function fadeout() {
if(test==0) {
topop--;
botop++;
}
if(objt.filters) {
objt.style.filter='alpha(opacity='+topop+')';
objb.style.filter='alpha(opacity='+botop+')';
}
else {
objt.style.opacity=topop/100;
objb.style.opacity=botop/100;
}
if(topop==0){
topnum+=2;
if(topnum>1){
topnum=0;
}
objt.src='cresttoKings2.jpg';
test=1;
}
if(test==1){
topop++;
botop--;
}
if(topop==100){
botnum+=2;
if(botnum>1){
botnum=1;
}
objb.src='rlc2-1.jpg';
test=0;
}
fader=setTimeout('fadeout()',speed);
}
</script>

</head>
<body>

<div id="container">
<img id="top" src="cresttoKings2.jpg" alt="one" style="Background:green"/>
<img id="bot" src="rlc2-1.jpg" alt="two" style="Background:pink"/>
</div>

</body>
</html>


Start picking through the code and dig out what you can use for your application.;)

python1340
10-22-2007, 12:07 AM
Well that answered part one of the question. I'm guessing that Mozilla started supporting 'opacity', thus eliminated the need for the browser-specific "-moz-opacity" attribute.

I'm still wondering how you can set any attribute whose name starts with a hyphen. JavaScript chokes on it when doing: obj.-my-css-attrib The leading hyphen causes a syntax error.

Twey
10-22-2007, 12:23 AM
As with any other property, a leading hyphen in CSS translates to a capital next letter in JS, so the name of the -moz-opacity property is MozOpacity (e.g. el.style.MozOpacity). Mozilla and KHTML, yes, now support the CSS3 "opacity," so if you don't much care about older versions of these browsers you don't need to worry about -moz-opacity or -khtml-opacity any more.

python1340
10-22-2007, 12:29 AM
As with any other property, a leading hyphen in CSS translates to a capital next letter in JS, so the name of the -moz-opacity property is MozOpacity (e.g. el.style.MozOpacity).
I didn't know that. Thanks!