CODEWITHSUNDEEP
javascriptjquery
Billy
Billy

Reputation: 905

Overriding the inline CSS with jQuery

HTML:

<div id="myDiv">

//Some content

</div>

I want to set the below css to the div using jQuery:

Transform: matrix(1, 0, 0, 1, 461, 300)

But that div has already inline style 

Transform: translate3d(0px, 0px, 0px)

When I am assigning the css through jQuery, it is not accepting.

$(“#myDiv”).css("transform", "matrix(1, 0, 0, 1, 461, 300)");

How to resolve the issue?

Update:

I'm also using the JS file at the bottom of the page(i.e below </body> tag). I have written the code in $(window).load(function(){}) event and it is applying. But I'm having flickering effect due to position interchanging.

Upvotes: 0

Views: 172

Answers (3)

Smamatti
Smamatti

Reputation: 3931

You have the wrong quotes in you selector: $(“#myDiv”)

$("#myDiv").css("transform", "matrix(1, 0, 0, 1, 461, 300)"); works fine for me now:

Sample
http://jsfiddle.net/xQ3bJ/

Upvotes: 0

Adminiculo
Adminiculo

Reputation: 333

Check this out:

setTimeout(function(){
    $("#myDiv").css("transform", "matrix(1, 0, 0, 1, 461, 300)");
}, 1000);

I set the timeout to be able of see the change.

Working Demo

I would say that the problem is because of this weird quotes you have around #myDiv.

Upvotes: 3

user1021726
user1021726

Reputation: 648

Try adding !important to the css rule, as in:

$(“#myDiv”).css("transform", "matrix(1, 0, 0, 1, 461, 300) !important");

Upvotes: -1

Related Questions