Continuous rotate image onclick of button - javascript

To display Image I used colorbox..In that I have add rotate-left and rotate-right to rotate the image..
The code is:
var rotate_right = document.getElementById('cboxRight');
$(rotate_right).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(90deg)');
});
var rotate_left = document.getElementById('cboxLeft');
$(rotate_left).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(270deg)');
});
It rotate 90deg if I click again on rightrotate button then it wont work..I want to rotate it again when click on button

You're only ever rotating to 90 or 270 degrees. When you click again, it doesn't move as it is already rotated to that angle.
Keep track of the current rotation instead and set the attribute to that value plus or minus 90deg - you can probably clean up the code a bit as well, but something like this fiddle: http://jsfiddle.net/w6ho689e/
var degrees = 0;
$("#cboxRight").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees += 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});
$("#cboxLeft").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees -= 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});

Related

Click to rotate goes in wrong direction at first

I am trying to have elements in a canvas rotate either clockwise or counter-clockwise depending on which arrow is clicked. The problem is that when you rotate one way and then another, the first click will go in the previously clicked arrow's direction on the first click.
ie. click rotate clockwise and it rotates clockwise. Then click rotate counter-clockwise and the first time you click it, the effected elements rotate clockwise on the then counter-clockwise on the second and each click afterwards. This happens in both directions.
Hope that's clear. Here, there's not much to it. Rotator code at the end:
$(document).ready(function(){
counter = 0;
//draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter++
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//existing dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9][0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
draggedNumber = ui.helper.attr('id').search(/drag([0-9][0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
$("ol").append($("div").attr("data-piece") + "<br>" );
}
}
});
//trash can
$("#trash").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) {
tolerance: 'fit', $(ui.draggable).remove();
$("ol").detach();
}
});
//rotator
var angle = 22.5;
$('#spin').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=22.5;
});
$('#spin2').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=-22.5;
});
});
Any help is much appreciated!
Try moving the angle += ... lines before the $('.drag').css(...) lines.
Cleaned up a little, and starting at angle = 0:
// rotator
var angle = 0;
function rotateTo(angle) {
var value = 'rotate(' + angle + 'deg)';
$('.drag').css({
'-webkit-transform': value,
'-moz-transform': value,
'-o-transform': value,
'-ms-transform': value,
});
}
$('#spin').click(function() {
angle += 22.5;
rotateTo(angle);
});
$('#spin2').click(function() {
angle -= 22.5;
rotateTo(angle);
});

Center of the div - center point

How do I make the center of the div as the center point for the rotation.
I came across this while I was doing some research but I can't seem to fit it in to mine.
This is what the post has suggested. But doesn't work.
$(area).css('-webkit-transform-origin', 'rotate(' + dgR + 'deg)');
function rot(e, area) {
var offset = area.offset();
var ceX = (offset.left) + ($(area).width() /2);
var ceY = (offset.top) + ($(area).height() /2);
var muX = e.pageX;
var muY = e.pageY;
var rdi = Math.atan2(muX-ceX, muY-ceY);
var dgR = (rdi * (180/Math.PI)*-5);
$(area).css('transform', 'rotate(' + dgR + 'deg)');
$(area).css('-webkit-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-o-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-ms-transform', 'rotate(' + dgR+'deg)');
}
You're using the transform-origin incorrect.
$(area).css('-webkit-transform-origin', '50% 50%');
This should place the rotation origin point in the middle of the area
When I got you right, you just want to rotate a div in it's center point, aren't you? Here you have to define the center point with transform-origin: 50% 50%; in your div.
Heres a fiddle to play around (without jscript): http://jsfiddle.net/nub0umft/

jquery rotate function not working

Hi guys at the moment i am trying to figure out how to rotate a div and make it stop at a loctation. I have had some help on this however iam not sure what iam doing wrong. Any help with the code would be great.
Thanks guys for the help
try change your javascript code to be like this:
$(window).load(function(){
var $elie = $("#super");
rotate(1);
function rotate(degree) {
$elie.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)'
});
console.log(degree);
if (degree < 100) {
timer = setTimeout(function() {
rotate(++degree)
}, 1);
}}
});
Here the demo: http://jsfiddle.net/ongisnade/mq8Ar/
Look at here http://jsbin.com/uwunaw/4/edit
I'm adding var elie = null; as global var and put elie = $("#super"); in onReady of jQuery.
Like this
$(function () {
elie = $("#super");
rotate(1);
});
It's working now.

Rotating on mouse move

Something I've wanted to learn for quite a time now, but haven't been able to figure out.
http://jsfiddle.net/Mobilpadde/Xt7ag/
Then you move the mouse, it follows, which is the easy part, but I want to rotate too, like always look in the direction of the mouse, but not so static, more like, if you move your mouse up, it should kinda rotate first, and then you move the mouse further away, it should begin to follow again (If you know what I mean).
Is that something simple to do, or 3k lines? (Or maybe a jQuery plugin?)
Hiya I got it something more closer by using an old post of mine : demo http://jsfiddle.net/Z3pGQ/3/
I am still working, will flick you more smoother version or if you can improve before me:
Old post: Rotating an element based on cursor position in a separate element
Hope it helps, I am trying to make it smoother now, cheers
Sample code
$(document).ready(function() {
$(document).mousemove(function(e) {
$(".firefly").css({
"top": (e.pageY * 2) + "px",
"left": (e.pageX * 2 + 130) + "px"
});
})
})
var img = $(".firefly");
if (img.length > 0) {
var offset = img.offset();
function mouse(evt) {
var center_x = (offset.left) + (img.width() / 2);
var center_y = (offset.top) + (img.height() / 2);
var mouse_x = evt.pageX;
var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-moz-transform', 'rotate(' + degree + 'deg)');
img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
img.css('-o-transform', 'rotate(' + degree + 'deg)');
img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}
$(document).mousemove(mouse);
}​
Image
This is going to involve a lot more math than I want to do right now, but you can apply rotations with css easily. Here are the properties for mozilla and webkit, you can see the rest of the (IE,Opera...) at this page. Here is your function with a 120deg rotation applied. You will still need to calculate the proper rotation, and adjust the left and top accordingly.
$(document).mousemove(function(e){
$(".firefly").css({
"top":(e.pageY*2)+"px",
"left":(e.pageX*2+130)+"px",
"-moz-transform": "rotate(120deg)",
"-webkit-transform": "rotate(120deg)"});
})
There is a jQuery plugin for that http://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/

How to add a 3 second delay to this function

My goal with this code is to create an effect of leaves blowing away 3 seconds after page load, but currently I am unable to create a delay. Perhaps its because the code format. I made i quick jsfiddle to demonstrate what I have so far.
http://jsfiddle.net/vXpDk/
So my question is how to create a delay of the function so that it doesn't start to rotate and slide for 3 seconds...and if it is possible to to create diagonal paths instead of horizontal and vertical.
Here's the code from the jsFiddle:
var $elie = $("#leaf1"), degree = 0, timer;
rotate();
function rotate() {
$elie.delay(2000)
.css({ WebkitTransform: 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
$elie.delay(2000)
.css({ '-moz-transform': 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
timer = setTimeout(function() {
++degree;
rotate();
},0);
}
Like this? http://jsfiddle.net/L69Ud/
var $elie = $("#leaf1"), degree = 0;
$elie.animate({ "left": "+=800px" }, 5000).fadeOut(100);
setTimeout(rotate, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}
and if it is possible to to create diagonal paths instead of
horizontal and vertical.
Animate left and top at the same time http://jsfiddle.net/L69Ud/1/
The only modification here is
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
How would you code this so that the div does not move at all for 3 seconds then begins to rotate and slide at the same time?
http://jsfiddle.net/L69Ud/3/
var $elie = $("#leaf1"), degree = 0;
setTimeout(function() {
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
rotate();
}, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}

Categories

Resources