Rotate any Div in jquery ~ Genuine Ethical website speed optimization services

Rotate any Div in html jquery.
==========================

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Multirotation test</title>
        <script type="text/javascript" src="../js/jquery-1.6.js"></script>
        <script type="text/javascript" src="jquery.multirotation-1.0.js"></script>
    </head>
    <style type="text/css">
        div{text-align:center;margin:auto}
        div.rotable{background:#00CC66;border:solid 2px #f00;color:#fff;width:10px;height:10px;padding:5px;margin-top:60px;margin-bottom:60px}
    </style>
    <body>
        <div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
           <div id="img_test" class="rotable">Amit

            </div>
            <p id="degs"></p>
        </div>
    </body>
    <script type="text/javascript">
        function plus(id) {
            $(id).rotate({ angle: 10 });
            get(id);
            return false;
        }

        function minus(id) {
            $(id).rotate({ angle: 90, direction: false });
            get(id);
            return false;
        }

        function reset(id) {
            $(id).clearRotation();
            get(id);
            return false;
        }

        function get(id) {
            var degs = $(id).getCurrentDegrees();
            //$('p#degs').html("Current degs: <b>" + degs + "°</b>");
        }
        var ang=1;
        intervalID=setInterval("setRotate('#img_test');",100);

        function setRotate(id) {
            $(id).rotate({ angle: 5 });
            get(id);
        }


    </script>
</html>

HERE IS THE jquery.multirotation-1.0.js CODE:
-----------------------------------------------------------------------

(function($){
    //global array to save the current rotation of the elements
    $.elems_rotation_history = [];

    $.fn.extend({
        clearRotation: function() {
            return this.each(function() {
                //get the element's identifier
                var id = this.id;
                //remove element from array
                $.elems_rotation_history[id] = null;
            });
        },

        getCurrentDegrees: function() {
            var id = this.attr('id');
            if (!$.elems_rotation_history[id]) {
                return 0;
            }
            return degs = $.elems_rotation_history[id].rotation;
        },

        rotate: function(options) {
            //create console
            if (!window.console) console = {};
            console.log = console.log || function(){};
            console.warn = console.warn || function(){};
            console.error = console.error || function(){};

            //set the default values
            var defaults = {
                  angle: 0
                , direction: true
                , speed: 0
                , deg2radians: Math.PI * 2 / 360
                ///debug
                , debug: false
                ///end
            };

            //to access options values use this: options.option_name
            var options = $.extend(defaults, options);

            return this.each(function() {
                //get the element's identifier
                var id = this.id;

                //if there aren't elements and there isn't the element into the array, sets rotation to 0
                if ($.elems_rotation_history && !$.elems_rotation_history[id]) {
                    $.elems_rotation_history[id] = { rotation: 0 };
                }

                //sets the rotation direction
                if (!options.direction) {
                    options.angle = options.angle * (-1);
                }

                //increments angle rotation of the element
                $.elems_rotation_history[id].rotation = (parseInt($.elems_rotation_history[id].rotation) + options.angle) % 360;

                ///debug
                if (options.debug) {
                    console.log("Angle = " + $.elems_rotation_history[id].rotation + " degree");
                }
                ///end

                rad = $.elems_rotation_history[id].rotation * options.deg2radians;
                costheta = Math.cos(rad);
                sintheta = Math.sin(rad);

                var a = parseFloat(costheta).toFixed(8);
                var b = parseFloat(sintheta).toFixed(8);
                var c = parseFloat(-sintheta).toFixed(8);
                var d = parseFloat(costheta).toFixed(8);

                var sMatrix = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";

                if ($(this).get(0).filters) {
                    if (options.speed > 0) {
                        console.warn("You set the speed options but IE doesn't support CSS3 transitions");
                    }

                    //if the browser is IE
                    try {
                        var x = $(this).get(0).filters.item("DXImageTransform.Microsoft.Matrix").enabled;
                    }
                    catch(e) {
                        $(this).get(0).style.filter += "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand');";
                    }

                    var matrix = $(this).get(0).filters.item("DXImageTransform.Microsoft.Matrix");
                    matrix.M11 = costheta;
                    matrix.M21 = sintheta;
                    matrix.M12 = -sintheta;
                    matrix.M22 = costheta;
                    matrix.enabled = true;

                    ///debug
                    if (options.debug) {
                        console.log("Set transform = matrix[" + matrix.M11 + ", " + matrix.M21 + ", " + matrix.M12 + ", " + matrix.M22 + "]");
                    }
                    ///end
                } else {
                    //animate rotation if speed > 0s
                    if (options.speed > 0) {
                        $(this).css("-moz-transition", "all " + options.speed + "s ease-in-out");
                        $(this).css("-webkit-transition", "all " + options.speed + "s ease-in-out");
                        $(this).css("-o-transition", "all " + options.speed + "s ease-in-out");
                    }
                    $(this).css("-moz-transform", sMatrix);
                    $(this).css("-webkit-transform", sMatrix);
                    $(this).css("-o-transform", sMatrix);

                    ///debug
                    if (options.debug) {
                        console.log("Set transform = " + sMatrix);
                    }
                    ///end
                }
            });
        }
    });
})(jQuery)

Genuine Ethical website speed optimization services

Blogroll

Thursday, August 14, 2014