CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pran
Pran

Reputation: 851

Changing brightness filter

I am trying to use jQuery to change the brightness filter css property of some of the images on my page, but I get the following error in the console: "Error in parsing value for 'filter'. Declaration dropped."

Here is the code I am using:

function changeBrightness() {
     $("#myImg").css({
     "filter"         : "brightness(50%)",
     "-webkit-filter" : "brightness(50%)",
     "-moz-filter"    : "brightness(50%)",
     "-o-filter"      : "brightness(50%)",
     "-ms-filter"     : "brightness(50%)"
     });
}

I also tried other formats of the above, just to see if it would work, but they produce the same error:

function changeBrightness() {
     var brightness = "brightness(50%)";
     $("#myImg")
        .css("filter",brightness)
        .css("webkitFilter",brightness)
        .css("mozFilter",brightness)
        .css("oFilter",brightness)
        .css("msFilter",brightness);
}

And I tried this general format as well, hoping jQuery would take care of the prefixes:

function changeBrightness() {
     $("#myImg").css("filter", "brightness(50%)");
}

The changeBrightness function is called when I click a button, and it should change the brightness of an image with the id "myImg" to 50%. I am using Firefox 24.7. Is the filter property for CSS3 just not functional in firefox (or any other browsers)?

Upvotes: 2

Views: 5137

Answers (2)

jonsuh
jonsuh

Reputation: 2875

Firefox doesn't globally support it.

Check out caniuse.com/#search=filter.

Btw, caniuse.com is a great resource for checking this kind of stuff.

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

Is the filter property for CSS3 just not functional in firefox (or any other browsers)?

Here is the answer from MDN:

This is an experimental technology

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

enter image description here

Upvotes: 1

Related Questions