CODEWITHSUNDEEP
jquerycssinternet-explorer
Dhaval Marthak
Dhaval Marthak

Reputation: 17366

rgba() not working in IE8

I just stuck up with the RGBA() manipulation in jQuery using IE 8

So far i have this:

$('.set').click(function (e) {
      var hiddenSection = $('div.hidden');
      hiddenSection.fadeIn()
      .css({ 'display': 'block' })
      .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
      .css({ top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
           left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
       })
       .css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
       .appendTo('body');
       $('span.close').click(function () { $(hiddenSection).fadeOut(); });
});

It works in all other browsers, Don't know why its failing in IE 8 I got this error!

Invalid property value in jquery.min.js.

Any help is greatly appreciated!

Thanks

Upvotes: 6

Views: 5145

Answers (4)

Spudley
Spudley

Reputation: 168715

Simple answer: IE8 does not support RGBA properties. It only knows about RGB.

RGBA support was only added in IE9.

Other very old browsers may also not have support for RGBA. However, there aren't many browsers that old that are still in use other than IE8.

There are some ways you could work around this:

  • Use a polyfill such as CSS3Pie. This will allow you to specify RGBA background colours in your CSS. You still won't be able to use it directly in JS code as you have it, but you could change the class to deal with it.

  • Use a tool like Modernizr to detect whether the browser supports this feature, and provide different functionality if it doesn't.

  • Use IE8's -ms-filter style to achieve the transparency effect. This allows you to set a range of special effects, including opacity. This is a non-standard IE feature, and is replaced by standard CSS in IE9/10, but is still useful for in certain cases for old IE versions.

  • Use a small PNG image with an alpha channel as your background instead. Bit of a shame to be using a background image for a plain colour background these days, but it will achieve the result you're looking for in all browsers.

Upvotes: 10

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

`rgba isnt supported by ie8.

However, there is a trick for transparency in i.e8 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

First 2 digit of #7F000000 are opacity and the next 6 digits are hexa color code.

7f is the equivalent of 50%

So your code should look like : 

.css({ 'background-color': 'rgba(0,0,0,0.5)' })  //Problem here in IE8
.css({'filter' : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);'}) //IE Fallback

Sources : http://css-tricks.com/rgba-browser-support/

Edit : After Derek Henderson comment, I will not write the code but if you want to add that still only when it'S IE8, check jQuery.browser

Upvotes: 5

palaѕн
palaѕн

Reputation: 73916

Instead of this:

.css({ 'background-color': 'rgba(0,0,0,0.5)' })

you can do this:

.css({ 'background-color': 'rgb(0,0,0)', 'opacity': '0.5' })

This will work in all the browsers.

Upvotes: 0

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

You have a typo. It should be:

rgba(0,0,0,0.5)

You were missing the 'a' part.

However, I'm not sure IE8 supports rgba() ...then again, jQuery possibly has a wrapper for this?

To be safe, I would try setting a background image in png format that has transparency.

.css({ 'background-image': 'http://example.com/myimage.png' })

Mikey.

Upvotes: 0

Related Questions