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

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

preguntado el 24 de agosto de 12 a las 00:08

1 Respuestas

Mira aquí: 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.

No olvide instalar Pastel de CSS for gradient support in older IE's.

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

Respondido 24 ago 12, 00:08

-See bottom of question. I found your answer useful for another site so accepted this one. But, the answer was in my use of JSON object within the jQuery. I rewrote it to use the jQuery API. I did have to stick with a jQuery 1.7.2 because of jReviews and that is why I was not able to use the new features of 1.8 on this site. Maybe there is more details to JSON I am not familiar with, but definitely failed to hold true in my attempts. - Shane

@Shane Of course! When you set them all at once like that each background element overwrites the one above - it has nothing to do with jQuery, it's simply impossible in javascript to make an object that has multiple elements all with the same name. - Ariel

-But the use of linear-gradient would not have worked (and did not in a test) singly with one element in the JSON form my question was on. I pointed that out because others might not get this was not jQuery, though nested in it.. therefore not using the API of the 1.8. The code I now have does work in multiple browsers and does not seem to overwrite the one above, it overlooks the ones that don't work (by browser choice).. at least after playing with it a bit. If you feel something else is happening I am open to any advice or opinion. - Shane

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.