Managing Transparency, Cross Browser
Posted: 10 December 2006 06:20 PM   [ Ignore ]
Newbie
Rank
Total Posts:  3
Joined  2006-08-22

Now that virtually every browser supports opacity, I have started using it more in the past year.  However, there a lot of people who are still using Windows 2000 or earlier (98 especially) and thus can only use up to version 6 of Internet Explorer.  IE 7 supports the opacity option fully, while version 6 using the DirectX filters for this option.  It is fun to manipulate the opacity using JavaScript, as you can get some really neat effects with it.  I have developed some code to make it so that you can set the opacity on any browser that supports it.

function set_opacity(divval{
  
if (div.filters{  //For IE
    
val *= 100;
    try 
{
      div
.filters.item("DXImageTransform.Microsoft.Alpha").opacity val;
    
catch (e
      
// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
      
div.style.filter 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
    
}
  } 
else {
    div
.style.opacity val;
    
div.style.MozOpacity val;  //This is for older Mozilla Browsers
  
}

  It’s pretty straight forward.  The official opacity property is supposed to be a decimal up to 1, while MS uses a percentage value up to 100.  The number passed to the function is the official way of passing the number, and in the case of IE it multiplies this number by 100 to get the percentage as IE expects it.  It may wipe out other filters if you have them set for the DIV (or whatever else you pass to it), but as I am not aware of any other filters which have an equivalent in all the other browsers, you probably should not be using them anyway :).

Profile
 
 
Posted: 11 April 2007 05:30 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  20
Joined  2007-04-10

Hi,
thank you for your function and good luck in creation of new masterpieces of programming
:-)

Profile
 
 
Posted: 25 November 2007 05:13 AM   [ Ignore ]   [ # 2 ]
Jr. Member
RankRank
Total Posts:  39
Joined  2007-08-26

The only issue there being if you want your code to validate.  There is a javascript alternative that is fully xhtml compliant.

Profile
 
 
Posted: 02 September 2010 10:29 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2010-09-02

Hi,
thank you for your function and good luck in creation of new masterpieces of programming
wood tile
wood look tile

Profile