Div moving around center on mousemove() - javascript

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.

Related

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

Detect hover/mouseover/mouseenter while dragging an element

How to detect hover/mouseover/mouseenter while dragging an element? I want to have green box after hovering it with the "drag" element. Is there any solution for that?
Note: I know that I could use jQuery UI for it but I want to do it by myself.
$("box").mouseover(function() {
$(this).addClass("green");
var box = $(this).attr("id");
$("#result").html(box);
});
$("box").mouseleave(function() {
$(this).removeClass("green");
});
$("drag").bind({
mousedown: function() {
$(this).addClass("absolute");
},
mouseup: function() {
$(this).removeClass("absolute");
},
mousemove: function(e) {
$(this).css({
left: e.pageX - (50 / 2),
top: e.pageY - (50 / 2)
});
}
});
$("body").mousemove(function(event) {
$("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
https://jsfiddle.net/38zecoL1/1/
Thank you for any help.
I would try to disable pointer events on the dragged object using: pointer-events: none;. That way you should get the events of the hovered objects instead of the dragged.
But you also need to adapt to the situation that the move and mouseup event will not work. You will have to bind them elsewhere (body for example)
This short example is not perfect but schuld give you a hint of how to do it better ;)
$("box").mouseover(function () {
$(this).addClass("green");
var box = $(this).attr("id");
$("#result").html(box);
});
$("box").mouseleave(function () {
$(this).removeClass("green");
});
$("#drag").bind({
mousedown : function (e) {
$(document.body).css({ 'user-select': 'none' })
var dragged = $(this);
dragged.css({
left : e.pageX - (50 / 2),
top : e.pageY - (50 / 2)
});
dragged.css({
'pointer-events' : 'none'
})
var upHandler = function () {
dragged.removeClass("absolute");
dragged.css({
'pointer-events' : 'all'
})
$(document.body).css({ 'user-select': 'initial' })
$("body").off('mouseup', upHandler);
$("body").off('mousemove', moveHandler);
}
var moveHandler = function (e) {
dragged.addClass("absolute");
dragged.css({
left : e.pageX - (50 / 2),
top : e.pageY - (50 / 2)
});
}
$("body").bind({
mouseup : upHandler,
mousemove : moveHandler
})
}
});
$("body").mousemove(function (event) {
$("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
box {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
#log {
position: absolute;
top: 150px;
}
.green {
background-color: green;
}
#drag {
width: 50px;
height: 50px;
float: left;
background-color: blue;
}
#drag.absolute {
position: absolute;
}
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<box id="box1">
<div id="drag"></div>
</box>
<box id="box2"></box>
<div id="result"></div>
<div id="log"></div>
The reason the container stays green and the other one doesn't change is that the element you're dragging is a child of the first container. So while your mouse is in the blue draggable box it's still considered inside the container on the left because the blue box is a child of the first container.
One way to fix this (and most likely isn't the best way) is to keep track of where the mouse is on the screen (which you're already doing to move the blue block). In there if you add a bit of code checking if the mouse is within the bounding box of either of the other containers and add/remove classes based on that. Then the classes will be added based on mouse position and not whether the mouse is over an element that is a child or is not a child.
Example: https://jsfiddle.net/38zecoL1/3/
var boxes = $("box")
for(var i = 0; i < boxes.length; i++){
var boundingBox = boxes[i].getBoundingClientRect();
if(e.pageX < boundingBox.right &&
e.pageX > boundingBox.left &&
e.pageY < boundingBox.bottom &&
e.pageY > boundingBox.top){
$(boxes[i]).addClass("green");
} else{
$(boxes[i]).removeClass("green");
}
}
This is likely pretty expensive to add in a page that deals with a more complex page than just a few divs and may not perform well in those more complex situations.
If you want to drag element I recommend you to use this JS library https://github.com/RubaXa/Sortable
There is an opt called
chosenClass: "sortable-chosen", // Class name for the chosen item
and in this class you can add different color and everything you want.
But if you wanto to do this by yourself i don't now

mousemove parallax only move slightly instead of mouse position

I'm wanting the plane and rocket to only move approx 5% from their original place when the mouse hits the hero-panel area.
this current code makes both images follow and offset where the mouse position is.
Please assist.
$(document).ready(function () {
$('#hero-panel').mousemove(function (e) {
parallax(e, document.getElementById('plane'), 1);
parallax(e, document.getElementById('rocket'), 2);
});
});
function parallax(e, target, layer) {
var layer_coeff = 10 / layer;
var x = ($(window).width() - target.offsetWidth) / 4 - (e.pageX - ($(window).width() / 4)) / layer_coeff;
var y = ($(window).height() - target.offsetHeight) / 4 - (e.pageY - ($(window).height() / 4)) / layer_coeff;
$(target).offset({ top: y ,left : x });
};
https://jsfiddle.net/jc0807/c5yke2on/
Thanks
Ok, I think I understand what you're looking for:
fiddle
$(document).ready(function () {
var plane = document.getElementById('plane');
var rocket = document.getElementById('rocket');
plane.homePos = { x: plane.offsetLeft, y: plane.offsetTop };
rocket.homePos = { x: rocket.offsetLeft, y: rocket.offsetTop };
$('#hero-panel').mousemove(function (e) {
parallax(e, document.getElementById('plane'), 10);
parallax(e, document.getElementById('rocket'), 20);
});
});
function parallax(e, target, layer) {
var x = target.homePos.x - (e.pageX - target.homePos.x) / layer;
var y = target.homePos.y - (e.pageY - target.homePos.y) / layer;
$(target).offset({ top: y ,left : x });
};
What we're doing here is recording the starting position of the plane and the rocket as a new property 'homePos' on the plane and rocket objects. This makes it easy to apply the parallax effect as an offset from the original positions based on the mouse distance from the object homePos.
If you modify the layer value passed to parallax, the amount of movement will change (we're dividing the mouse offset from the middle of the object's starting position by it, to calculate the new object offset amount).
I guess my question is somehow related to the one above and I didn't want to create a duplicate.
I am using the code bellow to "navigate" into an image on mousemove. The problem is that I cannot manage to make the image fill all the viewable screen area. I've added a red background to the container to show what I mean. The desired result would be to no red background visible.
HTML
<div class="m-scene" id="main">
<div class="scene_element">
<img class="body" src="http://www.planwallpaper.com/static/images/nature-background-images2.jpg" />
</div>
</div>
JS
$(document).ready(function() {
$('img.body').mousemove(function(e) {
parallax(e, this, 1);
});
});
function parallax(e, target, layer) {
var layer_coeff = 20 / layer;
var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
$(target).offset({
top: y,
left: x
});
};
CSS
.m-scene {
background-color: red;
overflow: hidden;
width: 100%;
}
.scene_element {
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.scene_element img {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
My jsFiddle is: fiddle
Thank you!

Controlling Jquery scrolltop speed

I have this code for moving the box using .scrollTop. Using this i code i was able to move the box from bottom to top, is there any other way to control the speed of scrolling every 100 pixel?
Here's my jquery:
$(document).ready(function () {
$(window).scroll(function () {
var x = $(document).scrollTop();
var dh = $(window).innerHeight();
var move = x / 100 * 100;
console.log(x);
$('.box').css('bottom', move);
}
});
});
and the css:
body {
height: 2000px;
}
.box {
width: 50px;
height: 50px;
background: #f00;
bottom: 0;
position: fixed;
}
Is there a way to do this? Thanks in advance guys. Have a nice day.
Not sure if this is exactly what you are getting at, if not, please be more specific as to what you are asking for. That said....
var move = x / 100 * 100;
Just change the numbers in the denominator. It alters the rate of scroll.

flip image on mouseover based on direction

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/

Categories