We Keep Coding

Clipping on SVG with 'mousemove' and mouse position alternative for mobile

The idea is there is a black and white picture, and on 'mousemove' using SVG clipping the image "gain colour" (following my mouse movement). I do this by getting the mouse coordinates and clipping the black and white picture with the coloured version of it. It works perfectly on desktop with every browser.
var clientX = 0;
var clientY = 0;
getCoordinates = function(event) {
clientX = event.clientX;
clientY = event.clientY;
};
updateRect = function() {
creative.dom.rect.setAttribute('x', clientX);
creative.dom.rect.setAttribute('y', clientY);
};
clipThroughImage = function() {
updateRect();
};
creative.dom.imageBw.addEventListener('mousemove', getCoordinates);
creative.dom.imageBw.addEventListener('mousemove', clipThroughImage);
On mobile, however, the clipping only "works" (when I keep 'mousemove') by tapping. Instead of the colour following my finger movement (like it does with the mouse), it just instantly goes there when I tap.
I tried using 'touchmove' but then it doesn't work at all, it just clips the entire coloured image and that's it.
What do I need to change to get the same results on mobile?

Made it work with the following:
var allowSwipe = true;
getCoordinates = function(event) {
if (!allowSwipe) return;
allowSwipe = false;
setTimeout(function() {
allowSwipe = true;
}, 10);
clientX = (event.clientX || event.touches[0].clientX);
clientY = (event.clientY || event.touches[0].clientY);
clipThroughImage();
};
creative.dom.imageBw.addEventListener('touchmove', getCoordinates);
creative.dom.imageBw.addEventListener('mousemove', getCoordinates);
And the rest of the code was still the same.

Rotate image counterclockwise with JQueryRotate

I'm trying to rotate an image 180 degrees counterclockwise every time the user click's the image's parent element. I'm using JQueryRotate v2.3.
My code:
$('.material').click(function () {
var thisPic = $(this).find('.fanpic');
thisPic.rotate({ animateTo: -180 });;
});
This works at first, but the image starts spinning clockwise with the second click onward. How can I fix this so the image always spins counterclockwise?

Try keeping the rotate value at somewhere for example in the parent element:
$('.material').click(function () {
if(!this.animateTo) this.animateTo = 0;
this.animateTo = this.animateTo + -180;
var thisPic = $(this).find('.fanpic');
thisPic.rotate({ animateTo: this.animateTo });;
});
Try this jsfiddle
Hope this helps,

Yo can keep a variable with the angle.
var angle = -180;
$('.material').click(function () {
var thisPic = $(this).find('.fanpic');
thisPic.rotate({ animateTo: angle });
angle -= 180;
});

Rotate an image without rotating element dimensions

I want to create an effect that when I click on an image element, it will rotate the content inside it but not the element's width and height(My img is 400x300). I want the element dimensions stay but the image rotate. Compressing the height or the width of the image based on the position is fine with me, as long as it does not rotate the element itself.
I have tried jQueryRotate but it seems it's only rotating the element, not the image inside it.
Is there any plugin or way for me to rotate the image without rotating the element itself?
EDIT:
My code:
$('#rotate-btn').click(function (e) {
value += 90;
if (value == 90) {
var img = document.getElementById('image_canv');
var width = img.clientWidth;
var height = img.clientHeight;
$('#image_canv').height(height);
$('#image_canv').width(width); {
animateTo: value
}
}
$('#image_canv').rotate(value);
});
});
It does rotate the image, but the position of the element moves, so it's not working out.

i take image with id myimg wrap it in div and then rotate it.
http://jsfiddle.net/D5Sz8/
Be carefull all styles applied to image maybe needed to apply on div if you dont want them to rotate along the image.
jQuery.fn.rotate = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
};
var i= $('img'), d= document.createElement('div'), rotation=0;
d.id='myimg'; i[0].id='';
i.wrap(d);
$('#myimg').css({'display':'inline-block', 'overflow':'hidden'});
ani();
function ani (){
i.rotate(++rotation);
requestAnimationFrame(ani);
}

Ok, so I'm assuming that you have a global variable defined as value
You can use the following code to rotate by 90 degree increments if that is what you want:
var value = 0;
$('#rotate-btn').click(function (e) {
var element = $("#image_canv");
var startDegree = value;
var endDegree = value + 90;
value += 90;
$({ i:startDegree }).animate({ i: endDegree }, {
step: function(now,fx) {
element.css({transform : 'rotate('+ now + 'deg)' });
},
duration: 1000
});
});
And here is an example of it working: http://jsfiddle.net/hQHhf/4/
If you need to rotate by some other increment, than the code will need to be changed slightly to fit those needs. But basically, your value variable should always end up being the same as endDegree so that the next rotation will start at the proper place for the image.
Here's an example of how to use it if you are wanting to do varying degrees of rotation, both positive and/or negative (For this, I changed id of rotate-btn to a class instead, and gave it its own function for rotating on any degrees):
var value = 0;
$('.rotate-btn').click(function (e) {
doRotate($(this).val(), 1000);
});
function doRotate(degrees, delay) {
var element = $("#image_canv");
var startDegree = value;
var endDegree = value + parseInt(degrees);
value = value + parseInt(degrees);
$({ i:startDegree }).animate({ i: endDegree }, {
step: function(now,fx) {
element.css({transform : 'rotate('+ now + 'deg)' });
},
duration: delay
});
}
And here is an example: http://jsfiddle.net/hQHhf/6/
Also made some minor edits to the HTML as well, like using <button> instead of <input> to send a proper value to the doRotate function and some other minor edits.
Hope this helps you get the jist of it and apply it for your needs. Also, because you are setting a width of 400, and a height of 300 on the images, while chrome does not seem effected by this, but some other browsers like firefox will be. For example, as the image rotates, the size rotates with it, this is because you don't have an equal size on both width and height of your image, so it won't look as tho its rotating naturally in all browsers. If you give both, width and height, the same size you won't have this problem.

You can use this javascript code so you can rotate your image easily. But you have only to change the image destination.
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
And now use the HTML code for the image:
<img id="exe" style='position:absolute;left:450px;height:300px;' src="images/example.png" alt="exe">
And it's about to finish just add another script tag:
rotateAnimation("exe",30);
This function above will move the image 30deg you can change it to 40,50... and the "exe" is the id of the image.

How can I bind a Raphael element to the mouse cursor?

I want to create an element and then have that element be immediately bound to the cursor. I have tools to move the element, but I don't know how to bind them to the cursor without having to click the element. I thought about simulating the mousedown() event, but I don't know how to do it.
For context, my ultimate goal is to create a line with user defined endpoint. The user clicks a point and 2 small black circles are created. One as a reference point the the first click and the other to be attached to the cursor with a path connect the 2 points. Once the user clicks another point, both small black circles with disappear and only the line will remain.
Any ideas?

Thanks to #Joan Charmant for pointing me in the right direction. Here's my solution thus far. $('#paper') is my canvas and tempPoint is the circle I created to bind to cursor movement.
$("#paper").mousemove(function (event)
{
if(firstLinePointSelected && tempPoint!=null)
{
if (!event) var event = window.event;
var x=0, y=0;
if (event.pageX || event.pageY)
{
x = event.pageX;
y = event.pageY;
}
else if (event.clientX || event.clientY)
{
x = event.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// subtract paper coords on page
tempPoint.attr("cx", x - $('#paper').offset().left);
tempPoint.attr("cy", y - $('#paper').offset().top);
}
});

CSS Triangle Flip On Click

Ok so i have this triangle div and when i click it, it only rotates 180deg. Ok so far so good but if i click it again it stays the same here is my code.
$('.Triangle').click(function()
{
var Location = $('.Triangle').offset().left;
$('#Account').css({"left" : Location});
$('#Account').slideToggle('fast');
$('.Triangle').css({"transform" : "rotate(180deg)"});
});

Transforms don't work that way (i.e. you can't apply it twice). You have to keep track of state:
$(".Triangle").on('click', function () {
if ($(this).data('flipped') {
$(this).data('flipped', false).css('transform', 'rotate(0deg)');
}

The 'transform' style sets the rotation of the element from it's original position. When you click it the first time, it rotates the element from 0deg to 180deg. When you click it again, it changes the rotation from 180deg to 180deg.
You need to keep a counter for the number of clicks and multiply that by your rate of rotation. Something like this should do the trick:
var count = 1;
$('.Triangle').click(function() {
var Location = $('.Triangle').offset().left;
$('#Account').css({"left" : Location});
$('#Account').slideToggle('fast');
$('.Triangle').css({"transform" : "rotate(" + (180 * count++) + "deg)"});
});`

var i = 0;
$('.Triangle').click(function() {
i++;
var Location = $('.Triangle').offset().left;
$('#Account').css({"left" : Location});
$('#Account').slideToggle('fast');
$('.Triangle').css({"transform" : "rotate(" + (i % 2 ? 0 : 180 + "deg)"});
});