CODEWITHSUNDEEP
javascriptjquerycssinternet-explorermatrix
Aaron
Aaron

Reputation: 2500

Using the Matrix Filter in Javascript

I'm able to get CSS rotation setup for all browsers, but now I need to do this inside Javascript. I'm using jQuery as well and currently the following:

.css({ '-ms-filter':"progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=-0.2588190451025207, M21=0.2588190451025207, M22=0.9659258262890683, SizingMethod='auto expand')"  });

is not working. The same code in the CSS works perfectly. I've tried escaping apostrophes, but it didn't work. Any ideas? I first need to set the values initially, so just a simple .CSS as show above. Then the values are updated within the following function:

function rotate(degree){ 
if((ievers==6)||(ievers==7)||(ievers==8)){
current_obj.css({
/* IE8 */
'-ms-filter':'"progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')"',/* IE<8 */'filter':'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')'});
} else {
/* HANDLE OTHER BROWSERS */ ...
};
rotatetimer = setTimeout(function(){ rotate(++degree); },10 );}

This code is setup and works in everything except IE7/8 (because of the (rotation=x) only allowing you 4 options for rotation. So I'm trying to swap that line out with the .Matrix and dynamically calculate the SIN/COS values on the fly.

Upvotes: 3

Views: 1728

Answers (1)

Csaba Ill&#233;s
Csaba Ill&#233;s

Reputation: 81

current_obj[0].style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=-0.2588190451025207, M21=0.2588190451025207, M22=0.9659258262890683, SizingMethod='auto expand')";

worked for me. Also, as I see, the BasicImage filter's rotation value is measured in ninety-degrees increment. More references on filters: MSDN filters

Upvotes: 1

Related Questions