flip image on mouseover based on direction - javascript

Is there a way to make this script switch images based on the direction the pointer is?
For example, if you have a fish, and you move the mouse to the right of the fish, it switches to an image facing that way. When you move your pointer to the left of the fish, it points it the other way.
demo
JAVASCRIPT
$("#foo").mousemove(function(event) {
$("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});
HTML
<div id="foo">
<div id="bee1">MoveMe</div>
</div>
CSS
#foo{
height:500px;
width:400px;
}
#bee1{
position:absolute;
border:1px solid #ccc;
}

$("#foo").mousemove(function(event) {
var bee = $("#bee1");
var position = bee.position();
var mousey = event.pageX;
if(position.left > mousey) {
$("#bee1").html("left");
} else {
$("#bee1").html("right");
}
$("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300);
});

Just check if current mouse position x is greater than image position and change your image src accordingly:
$("#foo").mousemove(function(event) {
var mousePos = {x: event.pageX, y: event.pageY},
elPos = imgEl.offset();
if(mousePos.x > elPos.left){
direction = '-->';
}
else{
direction = '<--';
}
imgEl.text(direction);
imgEl.stop().animate({left: event.pageX, top: event.pageY}, 300)
});
http://jsfiddle.net/WfQwZ/

Related

How to find edge of div for touchscreen swipe div?

I now have a working touchscreen image slider but the only problem is that when I touchscreen the movement position begins from the center of the div and moves the whole div to be positioned with the pointer in the middle and lift off screen - and then attempt to do another movement. the movement position begins again in the center of the div.
I know I need to reset the co-ords somehow when I lift off screen, or maybe unbind, but I have no idea how to do this. It takes me days if not weeks to simply figure these things out without help. Don't get me wrong I'm all about learning for myself, but I also learn a great deal more where I can examine a working solution of my own code.
Here is a little HTML for the divs:
.container{
position:absolute;
top:0%;
left:0%;
width:500px;
height:100%;
}
.drag{
position: absolute;
top:1%;
left:0%;
width:100%;
height:15%;
-webkit-transform: translate3d(0,0,0);
border-style: solid; 2px;
border-color: blue;
z-index:1000;
}
</head>
<body>
<div id="container" class="container">
<div id='drag' class='drag'><!---video area--->
some images
</div>
</div>
Here is the code for the swipe events.
var dom = {
container: document.getElementById("container"),
drag: document.getElementById("drag"),
}
var container = {
x: dom.container.getBoundingClientRect().left,
y: dom.container.getBoundingClientRect().top,
w: dom.container.getBoundingClientRect().width,
h: dom.container.getBoundingClientRect().height
}
var drag = {
w: dom.drag.offsetWidth
}
target = null;
document.body.addEventListener('touchstart', handleTouchStart, false);
document.body.addEventListener('touchmove', handleTouchMove, false);
document.body.addEventListener('touchend', handleTouchEnd, false);
document.body.addEventListener('touchcancel', handleTouchCancel, false);
function handleTouchStart(e) {
if (e.touches.length == 1) {
var touch = e.touches[0];
target = touch.target;
}
}
function handleTouchMove(e) {
if (e.touches.length == 1) {
if(target === dom.drag) {
moveDrag(e);
}
}
}
function handleTouchEnd(e) {
if (e.touches.length == 0) { // User just took last finger off screen
target = null;
}
}
function handleTouchCancel(e) {
return;
}
function moveDrag(e) {
var touch = e.touches[0];
var posX = touch.pageX - container.x - drag.w / 2;
dom.drag.style.left = posX + "px";
}
I KNOW IT'S DOWN TO THIS LINE OF CODE:
var posX = touch.pageX - container.x - drag.w / 2;
HERE IS THE FIDDLE:
http://jsfiddle.net/xbmyazb2/20/

How to check whether the mouse is moving upwards or downwards using JavaScript?

I found this solution in another topic. It works correctly when moving your mouse downwards.
However, if you move your mouse upwards with a little curve in it, the console will both log From Top and From Bottom.
$(document).ready(function() {
var mY = 0;
$(document).mousemove(function(e) {
// moving upward
if (e.pageY < mY) {
console.log('From Bottom');
// moving downward
} else {
console.log('From Top');
}
// set new mY after doing test above
mY = e.pageY;
});
});
code {
background: #ededed;
padding: 0 5px;
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>
How can I accurately measure if the mouse is moving upwards or downwards?
I think your code snippet works fine. Perhaps the only actual thing needed in order to see that you get some false positives when the mouse is moving left-right or the opposite is to make a small addition in your code as seen below.
$(document).ready(function() {
var mY = 0;
$(document).mousemove(function(e) {
// moving upward
if (e.pageY < mY) {
console.log('Up');
// moving downward
} else if (e.pageY > mY) {
console.log('Down');
// movement on horizontal axis
} else {
console.log('Moving left-right or the opposite');
}
// set new mY after doing test above
mY = e.pageY;
});
});
code {
background: #ededed;
padding: 0 5px;
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>
You can check mouse position 1 second after mousemove, And to do this use setTimeout
$(document).ready(function() {
var mY = 0;
$(document).mousemove(function(e) {
if(mY != e.pageY){// Works only if pageY changes
if (e.pageY < mY) {
document.querySelector("#mousemove").innerHTML = "From Bottom";
} else {
document.querySelector("#mousemove").innerHTML = "From Top";
}
setTimeout(function(){
mY = e.pageY;
},500);//500 means 0.5 second, You can change it
}else{
document.querySelector("#mousemove").innerHTML = "Left Right";
}
});
});
code {
background: #ededed;
padding: 0 5px;
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>
<div id="mousemove"></div>
500 means 0.5 second, You can change it.
If you little tangle during mouse move it will only check after 1 second, means if you are going upward and between 1 second if you tangled to down by 1-2 px, it will log as upward.
After 0.5 half second it sets position and again check that in which direction you are moving.
Another way is to check that you moved at least 5 px
$(document).ready(function() {
var mY = 0;
$(document).mousemove(function(e) {
if(mY != e.pageY){// Works only if pageY changes
//console.log(Math.abs(e.pageY - mY));
if (Math.abs(e.pageY - mY) > 4 ) {
if (e.pageY < mY) {
document.querySelector("#mousemove").innerHTML = "From Bottom";
} else {
document.querySelector("#mousemove").innerHTML = "From Top";
}
}
mY = e.pageY;
}else{
document.querySelector("#mousemove").innerHTML = "Left Right";
}
});
});
code {
background: #ededed;
padding: 0 5px;
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>
<div id="mousemove"></div>
Try this :) :
var oldx = 0;
if (e.pageX > oldx) {
console.log('From Right');
} else(e.pageX < oldx) {
console.log('From Left');
}
oldx = e.pageX;
https://codepen.io/headmax/pen/mBdMvg?editors=1111
var mY = 0;
$('body').mousemove(function(e) {
// moving upward
if (e.pageY < mY) {
console.log('From Bottom');
// moving downward
} else {
console.log('From Top');
}
// set new mY after doing test above
mY = e.pageY;
});
This uses jquery. We select the whole body and add the move mouse function which detects the mouse. The first if statement moves up after comparing the page coordinates and vice versa for else. Then we save the y coordinates into the variable mY

Canvas element with offset

Draws nothing if the item is biased.
jsfiddle: http://jsfiddle.net/9UyxF/
JavaScript:
var ctx = document.getElementById("drawing").getContext("2d");
$("#drawing").mousemove(function(e) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
});
var ctx_without_offset = document.getElementById("without_offset").getContext("2d");
$("#without_offset").mousemove(function(e) {
ctx_without_offset.lineTo(e.clientX, e.clientY);
ctx_without_offset.stroke();
});
CSS:
#drawing {
border: 1px solid #000;
position: absolute;
top: 50px;
right: 0;
}
#without_offset {
border: 1px solid #000;
}
How to fix it? Thanks in advance.
The coordinates on the canvas, and cooridnates of clientX and clientY have different origins. This version realigns them:
function makeDrawFunction(elem) {
var context = elem.getContext('2d');
return function(e) {
var offset = $(elem).offset();
context.lineTo(e.clientX - offset.left, e.clientY - offset.top);
context.stroke();
}
}
$("#drawing").mousemove(makeDrawFunction(
document.getElementById("drawing")
));
$("#without_offset").mousemove(makeDrawFunction(
document.getElementById("without_offset")
));
live demo
Your problem comes from how you get the mouse position.
clientX and clientY returns the mouse position relative to the page.
I don't know if there is something with jQuery to get the right coordinates, but you can try this :
.lineTo(e.clientX - this.offsetLeft, e.clientY - this.offsetTop);
Use pageX and pageY that will handle scroll offset for you, then subtract the offset position of the canvas and that's it.
Try it:
http://jsfiddle.net/9UyxF/14/
var ctx = document.getElementById("drawing").getContext("2d");
$("#drawing").mousemove(function(e) {
var pos = $(this).offset();
ctx.lineTo(e.pageX - pos.left, e.pageY - pos.top);
ctx.stroke();
});
var ctx_without_offset = document.getElementById("without_offset").getContext("2d");
$("#without_offset").mousemove(function(e) {
var pos = $(this).offset();
ctx_without_offset.lineTo(e.pageX - pos.left, e.pageY - pos.top);
ctx_with
You have to "normalize" pointer coords like:
var ctx = document.getElementById("drawing").getContext("2d"),
ctx_rect= ctx.canvas.getBoundingClientRect();
$("#drawing").mousemove(function(e) {
ctx.lineTo(e.clientX - ctx_rect.left, e.clientY - ctx_rect.top);
ctx.stroke();
});
In that case you'll have pointer coords relative to the canvas. Demo: http://jsfiddle.net/BuDpz/.
Also note that calculating offsets on every mousemove may affect the performance. That's why it's better to calculate it once, save values and update them on demand later.
You have to look for the offset of the element, too. You can find an updated fiddle here. As I'm in a rush it's quick and dirty, but it works.
$("#without_offset").mousemove(function(e) {
var left = e.clientX - $("#without_offset").offset().left;
var top = e.clientY - $("#without_offset").offset().top;
ctx_without_offset.lineTo(left, top);
ctx_without_offset.stroke();
});

Div moving around center on mousemove()

EDIT: I now have this: http://jsfiddle.net/cGZxv/115/ What if I want to get rid of container div and just use "document"? Is there a cleaner way to do this?
I've been playing around with some code I have found online, and I almost have it where I want it. I just can't figure out how to accomplish the last part. In this JSfiddle:
http://jsfiddle.net/cGZxv/114/
$(document).ready(function(){
$('div.container').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
if (x <= 400) {
x2=x*0.2
$('div.box').css({'right': x2});
}
var y = e.pageY - this.offsetTop;
if (y <= 400) {
y2=y*0.2
$('div.box').css({'bottom': y2});
}
});
});
What I want to do is have the "TEST BOX" Snap to the center of the containter DIV, and on mouse move, essentially "Orbit" the center. If you move your mouse in circles, you get the desired movement, but the box is at the wrong location.
Thanks in advance!
Here's the JS for putting it in the body instead of a container.
$(document).ready(function(){
$(window).mousemove(function(e){
var x = e.pageX-window.innerWidth/2;
if (x <= 400) {
x2=x*0.2
x3=x2+window.innerWidth/2
$('div.box').css({'right': x3});
}
var y = e.pageY-window.innerHeight/2;
if (y <= 400) {
y2=y*0.2
y3=y2+window.innerHeight/2
$('div.box').css({'bottom': y3});
}
});
});
Then I changed the CSS to get it to start in the middle:
.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; margin:-25px 0 0 -25px;bottom:50%;right:50%;}
Here's a JSFiddle.

How can I create a click and drag to change the width of an object with jQuery?

I have an object that I want to change the width of when you click on it and drag right or left. Adding to the width or taking away from it as you move the mouse (or finger).
<style>
#changeMe {width:300px; height: 200px;}
</style>
<div id="changeMe">
Some Content
</div>
<script>
$('#changeMe').mousedown(function(){
//Some Code?????
});
</script>
What you want to do is track the x co-ords of the mouse. If greater than they were before, increase size, if lower, decrease the size.
Not tested but the below should be inspiration.
var oldXPos = 0;
var isDragging = false;
$(document).mousemove(function(event) {
if (isDragging)
{
var difference = event.pageX - oldXPos;
// Do something with this value, will be an int related to how much it's moved
// ie $('#changeMe').css.width += difference;
}
oldXPos = event.pageX;
});
$('#changeMe').mousedown(function() {
isDragging = true;
})
$('#changeMe').mouseup(function() {
isDragging = false;
})
You just need a resizable({}) effect .
$('#changeMe').resizable({});
You can look at this article
Resizable
$(function() {
$('.testSubject').resizable();
});
or
#changeMe {width:300px; height: 200px; border: 1px solid black;}
<body>
<div id="changeMe">
Some Content
</div>
</body>
$('#changeMe').resizable({});
Or
$(function(){
$('img[src*=small]').toggle(
function() {
$(this).attr('src',
$(this).attr('src').replace(/small/,'medium'));
},
function() {
$(this).attr('src',
$(this).attr('src').replace(/medium/,'large'));
},
function() {
$(this).attr('src',
$(this).attr('src').replace(/large/,'small'));
}
);
});
If I understand your question correctly, that you want to be able to dynamically increase/decrease the size of the object as it moves along the x-axis, I recommend that you use $('#changeMe').offset() inside the jQuery UI drag event.
You can create a formula that you want to use based on an initial offset, and the new offset to size your container by $('#changeMe').css({ width: X, height: Y });, and insert whatever your X and Y values are in pixels.
Edited for further elaboration with code:
var initX = 0;
var initW = 0;
$('#changeMe').draggable({
start: function() {
initX = $(this).offset().left;
initW = $(this).width();
},
drag: function() {
var deltaX = initX - $(this).offset().left;
$(this).css({ width: initW + deltaX });
}
});
If you used that as your base, it's a very nice and simple solution for your application.

Categories