468,301 Members | 1,416 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,301 developers. It's quick & easy.

Setting Opacity

9,735 Expert Mod 8TB
So, the opacity style is rather annoying because every browser seems to handle it differently. I guess it's because opacity wasn't included in the w3c standards to begin with...mind you if it had been included from the get-go, I have my doubts on whether this would have changed anything that we have to deal with today.

Anyways, enough ranting....I'm attempting to place a <div> over top of my content while an asynchronous call to the server is taking place. This is done to prevent the user from submitting any additional data to the server during "special" processes...

I'd like to set the opacity of this <div> to about 50% so that it looks all "pretty" and the user knows that they aren't able to access any of the content in the area behind the <div>.

Some strange stuff is happening in IE7 and 8.
The <div> is appearing over top of the content correctly....but the opacity settings are very strange. It starts at about 50% at the middle of the <div> but as it spreads outwards it fades to 0%. It's kind of neat (a half faded circle in the center that fades to nothing)...but it's not what I want.

What am I doing wrong here?

How do I change this so that the entire <div> is faded to 50% instead of just a circle in the middle of my <div>?

Expand|Select|Wrap|Line Numbers
  1. function Processing() {
  2.     //shield is the <div> that is used  to cover the content and already has the the position style set to absolute.
  3.     var shield = document.getElementById('ctl00_CPH_MainContent_myControl_shield');
  4.     shield.style.display = 'block';
  6.     //I had attempted setting the CSS Class for the div that would have set
  7.     //opacity of it, but this isn't working well with the asynchronous stuff in IE
  8.     //so I decided to set each individual style in JavaScript instead
  9.     //shield.className = 'modalBackground';
  11.     shield.style.backgroundColor='white';
  12.     shield.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50, FinishOpacity=0, Style=2)';
  13.     shield.style.opacity='.5';
  14. }
The following works but I'm don't think it will work in IE6:
Expand|Select|Wrap|Line Numbers
  1. function Processing() {    
  2.     var shield = document.getElementById('ctl00_CPH_MainContent_myControl_shield');
  3.     shield.style.display = 'block';   
  4.     //shield.className = 'modalBackground';   
  5.     shield.style.backgroundColor='white';     
  6.     shield.style.filter = 'alpha(opacity=50)';    
  7.     shield.style.opacity='.5'; 
  8. }
Thanks for your time,

Feb 17 '09 #1
3 1644
16,027 Expert Mod 8TB
The element needs to "have layout" in IE for it to work. See here for more on the hasLayout property.
Feb 18 '09 #2
9,735 Expert Mod 8TB
An interesting read.

My initial thought on the topic is: "Got Layout?"

That article actually answered a long forgotten question regarding determining the height and width (clientWidth/clientHeight) of an element in order to center it via JavaScript...I just gave up on the problem and worked around it but I think I'll revisit that code and make appropriate changes to it...thanks.

But, this article didn't help me in figure my Opacity issue.
My element has it's height and width set, it hasLayout, and the opacity is "sort of" working...

Maybe I'll just give up on the IE6 compatibility. It's almost 2 versions ago...and is so much more work! Sometimes IE really gets on my nerves....but no where near as much as Opera.

Feb 18 '09 #3
16,027 Expert Mod 8TB
Have you got a standalone version of IE6? If so, filters may not work.
Feb 23 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Dean Edwards | last post: by
reply views Thread by Muhammad Aftab Alam | last post: by
1 post views Thread by mhoeneveld | last post: by
2 posts views Thread by reidarT | last post: by
15 posts views Thread by Sunny | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.