-ms-filter for gradient in IE8 via jquery

Question

I am experimenting on this color control panel where a user can change the look and feel of the page using a slide in control panel. An added complexity is that the slide-in panel is in parent window where as the page that the changes are made to is inside an iframe. I want the changes to take affect as they are made inside the control panel. For this I don't want to use AJAX. For this I have devised an algorithm and it is working fine.

Everything apart an issue with IE8 is working fine. I am using this style definition in css as default when the page is loaded.

(Thanks to Louis Lazaris - http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/)

background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

Now this is what I am trying to do in javascript using jQuery ( hex1 and hex2 are two variables containing two hex values for gradient):

jQuery('#iframeId').contents().find('.gradient').css(
{
        backgroundImage: '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
        backgroundImage: '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
        filter:  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

The code runs fine if I exclude the last condition of -ms-filter (because according to the documentation I read nowhere is it mentioned if this filter is supported by jQuery.css). For what I see one solution to my problem is to see the name and version of my browser using

navigator.userAgent

and if it is "Internet Explorer 8.0" I apply single background color.

Now my question is that, is there any other way to go around this and get gradient on IE8 also?

Answer 1

there is an alternative syntax to set CSS with jQuery. try it with following

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

Answer 2

You have something wrong with your javascript. The object key for -ms-filter should be wrapped in double or single brackets or it'll cause a syntax error.