Home/ Questions/Q 9134683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:42:26+00:00

I am experimenting on this color control panel where a user can change the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 */
});
    • 0