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?
CSS Codes
Junior Coders
How can you dynamically change CSS attribute -moz-opacity?
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?
Junior Coders
This is a cross-browser script, see if you can make any sense of it?
PHP Code:<!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.
Junior Coders
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.
Modtoreador
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.
Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
Junior Coders
I didn't know that. Thanks!Originally Posted by Twey
Posting Permissions
Reply With Quote
Bookmarks