CODEWITHSUNDEEP
javascript
Mick
Mick

Reputation: 2898

JS opacity element has absolutely no effect on my DIV box in Chrome

I tried this JavaScript code:

    dx = document.getElementById('box').style
    
    dx.backgroundColor= '#fff' 
    dx.visibility = "visible";
    dx.width = 800 + "px" ;
    dx.height = 40 + "px" ;
    dx.top = 600 + "px" ;
    dx.overflow = "hidden" ;
    dx.marginLeft = "-400px";

    tab = "<table width='800' border='0' cellpadding='1' > <tr> <td width='75' ></td> <td width='200'></td> <td width='75' ></td> <td ></td>  </tr>  <tr> <td align='left' valign='middle'><div align='right'>Contact</div></td> <td colspan='4' align='left' valign='middle'><input name='Pcontact' type='text' id='Pcontact' size='20' /> Number <input name='Pnumber' type='text' id='Pnumber' size='20' /> Mail <input name='Pmail' type='text' id='Pmail' size='25' /> <input name='addcontact' type='button' id='addcontact' value='Add Contact'  /></td> </tr> </table>" ;
    
    document.getElementById('box').innerHTML = tab 

    dx.opacity = 10 ;

and this CSS for the box element:

#box {
    position:fixed;
    width: 600px;
    height: 700px;
    top: 40px ; 
    border: 2px solid black;
    background-color:#CCC; 
    left:50% ; 
    margin-left:-300px;
    visibility:hidden ;
    overflow:scroll ; 
}

I expected this to reduce the opacity, but it seems to have no effect. What is wrong, and how do I fix it?

Upvotes: -1

Views: 135

Answers (3)

slebetman
slebetman

Reputation: 113974

Just to be complete, you really should be doing:

var opacity = 10;
dx.opacity = (opacity/100); // standard
dx.MozOpacity = (opacity/100); // older firefox
dx.KhtmlOpacity = (opacity/100); // older safari
dx.filter = “alpha(opacity=” + opacity + “)”; // IE

Although, personally I just do:

var opacity = 10;
dx.opacity = (opacity/100); // standard
dx.filter = “alpha(opacity=” + opacity + “)”; // IE

since Firefox and Safari users typically upgrade their browsers.

Upvotes: 1

Grahame A
Grahame A

Reputation: 3953

Would this work for you? Or do you need all of the elements transparent?

#box {
position:fixed;
width: 600px;
height: 700px;
top: 40px ; 
border: 2px solid black;
background-color:rgba(204, 204, 204, 0.1);
left:50% ; 
margin-left:-300px;
visibility:hidden ;
overflow:scroll ; 
}

http://www.css3.info/introduction-opacity-rgba/

Upvotes: 0

Quentin
Quentin

Reputation: 944054

opacity has a range of 0 to 1, you are setting it to 10.

You probably mean 0.1 or perhaps 0.9.

Upvotes: 2

Related Questions