How to Modify css by jquery with vendor prefix?

Question

I am trying to change a jquery ui slider,s background css with vendor prefixes. I am using linear gradient. I need support for al most all browser. I have set some css with vendor prefixes in css stylesheet and I want to change gradient via javascript. I need css with this 5 prefixes

-webkit-
-moz-
-o-
-ms-

-khtml-

Here is jsfiddle

$(function() {
   $( "#range-slider1" ).slider({
      range:false,
      min: 0,
      max: 360,
      value: 0,
      slide: function( event, ui ) {
         var hue = ui.value,
             sat = $('#range-slider2').slider('value'),
             light = $('#range-slider3').slider('value'),
             alpha = $('#range-slider4').slider('value'),
             hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")",
         satRangeW = "-webkit-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))",
        satRangeMo = "-moz-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))";
        $("#slidevalue").text(hsla);
        $(".slidevalue").css('background-color', hsla);
        $("#range-slider2").css("background", satRangeW);

      }
   });

    $( "#range-slider2" ).slider({
       range:false,
       min: 0,
       max: 100,
       value: 100,
       slide: function( event, ui ) {
          var hue = $('#range-slider1').slider('value'),
              sat = ui.value,
              light = $('#range-slider3').slider('value'),
              alpha = $('#range-slider4').slider('value'),
              hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
          $("#slidevalue").text(hsla);
          $(".slidevalue").css('background-color', hsla);

       }
    });
    $( "#range-slider3" ).slider({
       range:false,
       min: 0,
       max: 100,
       value: 50,
       slide: function( event, ui ) {
          var hue = $('#range-slider1').slider('value'),
              sat = $('#range-slider2').slider('value'),
              light = ui.value,
              alpha = $('#range-slider4').slider('value'),
              hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
          $("#slidevalue").text(hsla);
          $(".slidevalue").css('background-color', hsla);

       }
    });
    $( "#range-slider4" ).slider({
       range:false,
       min: 0,
       max: 1,
       value: 1,
       step: 0.01,
       slide: function( event, ui ) {
          var hue = $('#range-slider1').slider('value'),
              sat = $('#range-slider2').slider('value'),
              light =  $('#range-slider3').slider('value'),
              alpha = ui.value,
              hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
          $("#slidevalue").text(hsla);
          $(".slidevalue").css('background-color', hsla);

       }
    });
});

http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes/17487728 ( the vendor prefix is added with `.css()` ) — Shanimal, Mar 14 '16 at 07:02
I saw this question. Is it possible to do without any plugin? — Shohidul Alam, Mar 14 '16 at 07:09
Yes, `.css()` is a method that you can call on a jQuery object. The code is already using it as I pointed out — Scott Marcus, Mar 14 '16 at 07:12
just use the suffix `linear-gradient`, jquery will handle the vendor prefixes per the SO link i posted above ;) — Shanimal, Mar 14 '16 at 07:13
what version of jQuery are you using? This was added/fixed in 1.8... http://www.richardfawcett.net/demos/jquery_1.8.0_testing.html — Shanimal, Mar 14 '16 at 07:21
I my real project i am using 1.11.0 but due to jsfiddle problem I am using 1.8 on jsfiddle.( It dont give jq ui option on 1.11.0 ) — Shohidul Alam, Mar 14 '16 at 07:26

score 0 · Answer 1 · answered Mar 14 '16 at 07:04

0

You already have code showing how to modify CSS via jQuery, for example:

 $(".slidevalue").css('background-color', hsla);

You would use this same syntax, just supply the CSS property as the first parameter and the value as the second. For example:

 $(".slidevalue").css('-webkit-border-radius', "5px");

answered Mar 14 '16 at 07:04

Scott Marcus

64,069
6
49
71

I am using linear-gradient. – Shohidul Alam Mar 14 '16 at 07:07
Doesn't matter. Just use -webkit-linear-gradient- then. Whatever CSS property you need, just supply that as a string in the first parameter. – Scott Marcus Mar 14 '16 at 07:10

How to Modify css by jquery with vendor prefix?

1 Answers1