Set correct css transform based on browser

Question

I'm trying to add the correct css "transform" based on browser here is what I have tried but its not working:

if ($.browser.msie) {
    var BroTrans = 'transform';
 } else
if ($.browser.webkit) {
    var BroTrans = '-webkit-transform';
 } else
if( $.browser.opera ){
    var BroTrans = '-o-transform';
 } else
if( $.browser.mozilla ){
    var BroTrans = '-moz-transform';
 }

var $img = $('img.zoom');
$img.css({
  BroTrans : 'scale(2) rotate(0.1deg)'
 });

I'm using jquery 1.7 so its not the fact $.browser is now depreciated

score 2 · Accepted Answer · answered Jan 03 '13 at 22:22

var $img = $('img.zoom');
$img.css(BroTrans, 'scale(2) rotate(0.1deg)'); // ta da ?

When you did it your way it was setting the BroTrans css field to that value, which is not what you wanted.

Also side point: try not to repeat var BroTans over and over. Just define it once at the top:

 var BroTrans;
 if ($.browser.msie) {
    BroTrans = 'transform';
 } else if ($.browser.webkit) {
    BroTrans = '-webkit-transform';
 } else if($.browser.opera) {
 //...

No problem @AnnaRiekic Happy to help! ^_^ – Naftali Jan 03 '13 at 22:38 — Naftali, Jan 03 '13 at 22:38

Set correct css transform based on browser

1 Answers1