How to code CSS for all browsers in jQuery.css() method?


Tags: javascript,jquery,json,dom,css3

Problem :

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'
            });


Solution :

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....


    CSS Howto..

    How can i fill a paragraph (until end of line) with dashes using CSS

    How to Display this CSS List using Class

    CSS how to make an element fade in and then fade out?

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    Does anyone know how to getr this background effect with css?

    CSS how to hide resize divs while keeping it centerd

    How to simulate nonstoparagraphing in HTML/CSS?

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    How to align text and image in xslt with css

    How to change CSS for a specific page in wordpress?

    How to give hover effect to next div using css

    How to create a simple Modal Dialog Box in JQuery?

    How to add a border-bottom-image with css

    Avoid the height change of a container + how to position a list item at end

    How to trim off Image in CSS?

    CSS: How to create a
  • with 100% width
  • How to show/hide div on click with stricly HTML/CSS

    How to add a shadow for underline (bottom border) in css

    How to align div to center of verital and horizontal

    How do I create two columns using CSS?

    How to change color of Bootstrap warning class table row

    How to move content in ul to the center HTML + CSS

    How should I crop the image at client side using jcrop and upload it?

    How to align text next to a “div” in HTML/CSS?

    How can I rotate a font icon 45 degrees?

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

    How to give the a specific background color in CSS?

    How to create that background on my page with css [duplicate]

    How to center icons in div consistently? [duplicate]

    How to assign CSS properties to aside tag