2D image rotation javascript to work in all browsers. Help needed to fix my code

Question

I'm trying to have a simple image rotate back and forward on mouse click. I've been experimenting with jQuery. The code I've written works fine in Safari, Firefox and Chrome. The problem is with IE 9, 11 and most likely 10 which I don't have to test. I have done a test page where any can see what I've accomplished and test for yourself what happens in IE. Here is the link to my test page I appreciate if somebody points out what to add or remove from the code I'm using to have it working in IE 10 AND 11 the same way it works in other browsers above mentioned.

Thank you very much!

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>.rotate() - Simple rotation on mouse click of the image</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><style type="text/css"></style>
  <style type="text/css">    body {
  padding:0px;
  background: transparent;
}

img {
  margin-bottom:0px;
}</style>
<script type="text/javascript">//<![CDATA[ 
// .rotate() cross
$(function() {
  $('#btn3').toggle(function() {
    $(this).rotate({ endDeg:90, persist:true });
  }, function() {
    $(this).rotate({ endDeg:45 });
  });

  })
$.fn.rotate=function(options) {
  var $this=$(this), prefixes, opts, wait4css=0;
  prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
  opts=$.extend({
    startDeg: false,
    endDeg: 360,
    duration: .25,
    count: 1,
    easing: 'linear',
    animate: {},
    forceJS: false
  }, options);

  function supports(prop) {
    var can=false, style=document.createElement('div').style;
    $.each(prefixes, function(i, prefix) {
      if (style[prefix.replace(/\-/g, '')+prop]==='') {
        can=true;
      }
    });
    return can;
  }

  function prefixed(prop, value) {
    var css={};
    if (!supports.transform) {
      return css;
    }
    $.each(prefixes, function(i, prefix) {
      css[prefix.toLowerCase()+prop]=value || '';
    });
    return css;
  }

  function generateFilter(deg) {
    var rot, cos, sin, matrix;
    if (supports.transform) {
      return '';
    }
    rot=deg>=0 ? Math.PI*deg/180 : Math.PI*(360+deg)/180;
    cos=Math.cos(rot);
    sin=Math.sin(rot);
    matrix='M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+',SizingMethod="auto expand"';
    return 'progid:DXImageTransform.Microsoft.Matrix('+matrix+')';
  }

  supports.transform=supports('Transform');
  supports.transition=supports('Transition');

  opts.endDeg*=opts.count;
  opts.duration*=opts.count;

  if (supports.transition && !opts.forceJS) { // CSS-Transition
    if ((/Firefox/).test(navigator.userAgent)) {
      wait4css=(!options||!options.animate)&&(opts.startDeg===false||opts.startDeg>=0)?0:25;
    }
    $this.queue(function(next) {
      if (opts.startDeg!==false) {
        $this.css(prefixed('transform', 'rotate('+opts.startDeg+'deg)'));
      }
      setTimeout(function() {
        $this
          .css(prefixed('transition', 'all '+opts.duration+'s '+opts.easing))
          .css(prefixed('transform', 'rotate('+opts.endDeg+'deg)'))
          .css(opts.animate);
      }, wait4css);

      setTimeout(function() {
        $this.css(prefixed('transition'));
        if (!opts.persist) {
          $this.css(prefixed('transform'));
        }
        next();
      }, (opts.duration*1000)-wait4css);
    });

  } else { // JavaScript-Animation + filter
    if (opts.startDeg===false) {
      opts.startDeg=$this.data('rotated') || 0;
    }
    opts.animate.perc=100;

    $this.animate(opts.animate, {
      duration: opts.duration*1000,
      easing: $.easing[opts.easing] ? opts.easing : '',
      step: function(perc, fx) {
        var deg;
        if (fx.prop==='perc') {
          deg=opts.startDeg+(opts.endDeg-opts.startDeg)*perc/100;
          $this
            .css(prefixed('transform', 'rotate('+deg+'deg)'))
            .css('filter', generateFilter(deg));
        }
      },
      complete: function() {
        if (opts.persist) {
          while (opts.endDeg>=360) {
            opts.endDeg-=360;
          }
        } else {
          opts.endDeg=0;
          $this.css(prefixed('transform'));
        }
        $this.css('perc', 0).data('rotated', opts.endDeg);
      }
    });
  }
  return $this;
};
//]]></script>
</head>
<body>
<img src="http://f.cl.ly/items/2B0t0j1c2P0m2B080D2H/RedCross-.gif" id="btn3">
</body></html>

I deleted your [tag:java] tag and substituted a [tag:javascript], please correct me if I'm wrong, but your question doesn't appear to have a thing to do with Java. If I'm right, in the future, you would do well to be as careful as possible with your question tags, since they offer your best chance of getting the right experts to your question. — Hovercraft Full Of Eels, Jul 15 '14 at 01:44
Thank you very much for your acclamatory and help Hovercraft Full of Eels. I really appreciate it! — pause-n-loop, Jul 15 '14 at 12:14

score 0 · Answer 1 · answered Jul 15 '14 at 02:04

Reffer to this JSFiddle

JQuery

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());

    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}

    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});

Thank you very much, Mike. I've started with another JSFiddle: http://jsfiddle.net/Anatol/T6kDR/ because I want the click (on) the image, no external buttons/links. That JSFiddle page works fine in (all) the browsers, but when I test mine, it doesn't work in IE. It does work fine in Safari, FF and Chrome. — pause-n-loop, Jul 15 '14 at 14:31

2D image rotation javascript to work in all browsers. Help needed to fix my code

1 Answers1