Question

I am adding a dynamic gradient that requires multi-browser CSS; it works if directed at one browser and even works if written in a CSS file, but using the .css() method in jquery it fails to load the background. To get an idea of what I am trying to do here is the example of my code that does not work when adding all browser CSS …

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css({
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '#00172A',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))',
                'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0 )',
                'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            });

while using a single ‘background’ call it will work in the browser chosen, for example this works in firefox …

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css({
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            });

You can find the code live at http://www.thediabetesnetwork.com.
EDIT : fixed by removing css out of json object and used jquery api. Notice how the calls are wrapped in the json brackets and using json syntax.. that was the issue. Now it looks like this.

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))');
            $jj('.fixedElement').css(
                {
                'position': 'fixed',
                'top': '0',
                'z-index': '9999',
                'width': '120%',
                'paddingRight': '20%',
                'paddingLeft': '20%',
                'marginLeft': '-10%',
                'left': '0',
                'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'paddingTop': '0',
                'paddingBottom': '0',
                'color': '#ffffff'
            });

Answer 1

See here: http://blog.jquery.com/2012/08/09/jquery-1-8-released/ all you need to do is use linear-gradient and jQuery will automatically polyfill the rest.

Don’t forget to install CSS Pie for gradient support in older IE’s.

However that does raise the question of the css-pie polyfill in jQuery….