CSS3Pie - after changing style by jquery it doesnt work any more

Question

I have my css like this:

.ui-widget-header#shuttleList {
background: linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);
-pie-background: linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);
behavior: url(/scripts/core/pie/PIE.htc);
}

It works very fine in IE9.

Now I have to use this dynamicly in jquery, like this:

        if (contentBox[0].id.indexOf('shuttle') >= 0)
        {
            contentHeader.css('background', 'linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);');
            contentHeader.css('-pie-background', 'linear-gradient(120deg, white 180px, #d3d3d3 180px, #d3d3d3 250px, #f2f2f2 250px);');
            contentHeader.find('li').css('display', 'block');
        }

It works for IE10 and IE11, so I assume the jquery command itself works well - but not the pie-background. Maybe the pie (it's just javascript, isnt it?) doesnt get the actual information, e.g. no event is fired?

Any ideas?

Answer 1

jQuery's .css('x') method sets element.style.x behind the scenes; if you were doing that directly then you'd have to use element.style.PieBackground='...' so try formatting the property name that way here too:

contentHeader.css('PieBackground', '...')