Code works in JSfiddle but not on local host [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to create a live rendering box where I can click and drag to scale. I found this example,
http://jsfiddle.net/d9BPz/546/
but when I run it locally, nothing appears. I figure it has to do with the CSS styling. I thought you're not allowed to give JS variables CSS styling.
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
I made sure to correctly add the javascript and css files in the index file.

In your local machine, write the script in body after <div id="canvas"></div>
<html>
<head>
<style>
#canvas {
width:2000px;
height:2000px;
border: 10px solid transparent;
}
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script>
initDraw(document.getElementById('canvas'));
function initDraw(canvas) {
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
var element = null;
canvas.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
canvas.onclick = function (e) {
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
canvas.appendChild(element)
canvas.style.cursor = "crosshair";
}
}
}
</script>
</body>
</html>
You are getting exception because it is trying to set onmouseover event before loading the canvas object.

Related

Draw a bounding box over an image present inside a modal

I am JavaScript Beginner and I am working on a small code where I have an image displayed inside a Modal and I am trying to draw a bounding box over the image.
I have tried the following code to draw the bounding box over the image.
Html: ( the code for the modal that shows the image)
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<img class="modal-content" id="img01">
</div>
</div>
Javascript: ( the logic that I tried to draw a bounding box over the image)
initDraw(document.getElementById('imgarea'));
function initDraw(imgarea) {
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var element = null;
imgarea.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
imagearea.onmouseup = function (e) {
if (element !== null) {
element = null;
imagearea.style.cursor = "default";
console.log("finsihed.");
} }
imagearea.onmousedown = function (e) {
if(element==null){
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
imagearea.appendChild(element)
imagearea.style.cursor = "crosshair";
e.preventDefault();
}
}
}
css: (for the bounding box)
.rectangle {
border: 10px solid red;
position: absolute;
}
.imagearea {
display: flex;
flex-direction: column;
float: left;
width: 35%;
max-width: 700px;
position: relative;
}
#img01{
position: absolute;
}
The above code displays the image in modal and when I try to draw the bounding box on the image, the cursor changes to crosshair as expected , but I could not see the bounding box when i draw it over the image. Just the cursor changes but the rectangle(bounding box) which I draw over the image is not visible.
Can some one help me with this. Thank you
There are two problems.
You can't append children to <img>.
Your calculations are based on the viewport, while border's CSS is relative to the image. There are multiple ways to fix that, the quickest one would be to subtract image's position from your mouse position, like this:
function setMousePosition(e) {
// your mouse calculations
const boundaries = e.currentTarget.getBoundingClientRect();
mouse.x -= boundaries.left;
mouse.y -= boundaries.top;
}
Also, make sure you use setMousePosition() in your mousedown handler.

how to move one div with another in javascript

I am trying to make a web app with two boxes, one contained in the other. The user should be able to click and move the inner box, however, the user should not be able to move this box outside the confines of the outer box. The user can move the outer box by dragging the inner box against one of the edges of the outer box. I know how to move the inner box, but the problem is how to move the other box with this restriction. Can anybody help me please? Here is what I did so far:
<!doctype html>
<head>
<title>JavaScript Game</title>
<style>
#container {
height:400px;
width:600px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:green;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:red;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="guy"></div>
<script>
var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position
guy.addEventListener("mousedown", function(event) {
if (event.which == 1) {
lastX = event.pageX;
lastY = event.pageY;
addEventListener("mousemove", moved);
event.preventDefault(); // Prevent selection
}
});
function buttonPressed(event) {
if (event.buttons == null)
return event.which != 0;
else
return event.buttons != 0;
}
function moved(event) {
if (!buttonPressed(event)) {
removeEventListener("mousemove", moved);
} else {
var distX = event.pageX - lastX;
var distY = event.pageY - lastY;
guy.style.left =guy.offsetLeft + distX + "px";
guy.style.top = guy.offsetTop + distY + "px";
lastX = event.pageX;
lastY = event.pageY;
}
}
</script>
</body>
You could add a check to see if moving the box would break bounds of cont.
try to use getBoundingClientRect()
Check the snippet below for the working code.
View in full screen for best results.
var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position
guy.addEventListener("mousedown", function(event) {
if (event.which == 1) {
lastX = event.pageX;
lastY = event.pageY;
addEventListener("mousemove", moved);
event.preventDefault(); // Prevent selection
}
});
function buttonPressed(event) {
if (event.buttons == null)
return event.which != 0;
else
return event.buttons != 0;
}
function moved(event) {
if (!buttonPressed(event)) {
removeEventListener("mousemove", moved);
} else {
var distX = event.pageX - lastX;
var distY = event.pageY - lastY;
guy.style.left =guy.offsetLeft + distX + "px";
guy.style.top = guy.offsetTop + distY + "px";
// ********************************************************************
// get bounding box borders
var contBounds = guy.getBoundingClientRect();
var guyBounds = cont.getBoundingClientRect();
// check bottom bounds
if (contBounds.bottom >= guyBounds.bottom){
cont.style.top = cont.offsetTop + distY + "px";
}
// check top bounds
if (contBounds.top <= guyBounds.top){
cont.style.top = cont.offsetTop + distY + "px";
}
// check left bounds
if (contBounds.left <= guyBounds.left){
cont.style.left = cont.offsetLeft + distX + "px";
}
// check right bounds
if (contBounds.right >= guyBounds.right){
cont.style.left = cont.offsetLeft + distX + "px";
}
// ********************************************************************
lastX = event.pageX;
lastY = event.pageY;
}
}
#container {
height:300px;
width:300px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:#CCC;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:#000;
left: 200px;
top: 200px;
}
<div id="container"></div>
<div id="guy"></div>
try this link to get you started as far as keeping the "guy" inside the "contatiner": http://www.w3schools.com/html/html5_draganddrop.asp
their example shows how you can make an element only drop inside another element.
as far as moving the container...i would think that you could add some if else statements into the moved function that will test the position of the guy against the conatiner's outline and say that when they meet to move the container as well.
i am very new to javascript myself but this is just a suggestion from what i think i understand of it.

Drag and drop position relative

Why when the ball is placed relative positioning when you press the mouse it bounces? Absolute positioning is when this doesn't happen.
var ball = document.querySelector('.ball');
ball.onmousedown = function(event) {
var shiftX = event.pageX - getCoords(this).left,
shiftY = event.pageY - getCoords(this).top;
this.style.position = 'relative';
this.zIndex = 10000;
function move(event) {
this.style.left = event.pageX - shiftX + 'px';
this.style.top = event.pageY - shiftY + 'px';
}
move.call(this, event);
document.onmousemove = function(event) {
move.call(ball, event);
};
this.onmouseup = function(event) {
document.onmousemove = this.onmouseup = null;
};
return false;
};
ball.ondragstart = function() {
return false;
};
function getCoords(elem) {
var box = elem.getBoundingClientRect();
return {
top: box.top + window.pageYOffset,
left: box.left + window.pageXOffset
};
}
body {
margin: 50px;
}
img {
cursor: pointer;
}
<img class="ball" src="https://js.cx/clipart/ball.svg" alt="" />
I guess it's because of the padding of the body element. Please explain.
it seems i found answer
Implementing drag and drop on relatively positioned elements in JavaScript
and as it says, with relative position, your element contain offset of all objects in his parent-tag
and parent's margin and padding too
so when you try to get elemtn's position, you should count it's real offset in parent, see in my code example work with count index
<html>
<body>
<div id=obj1 style="width:100px; height:100px; background:#000; position:relative; " ></div>
<div id=obj2 style="width:100px; height:100px; background:#000; position:relative; " ></div>
<div id=obj3 style="width:100px; height:100px; background:#000; position:relative; " ></div>
<script>
var dragObj, count=0;
function set_drag_drop(obj)
{
if(count>0){
// count margins and divs offset
// body{ margin:10px; }
// height:100px;
obj.adx = 10;
obj.ady = 10 + (count*100)
}else{
obj.adx = 0;
obj.ady = 0;
}
count++;
obj.onmousedown = function(e)
{
var rect = obj.getBoundingClientRect();
obj.dx = rect.left - e.clientX;
obj.dy = rect.top - e.clientY;
obj.isDown = true;
dragObj = this;
}
obj.onmouseup = function(e)
{
obj.isDown = false;
}
document.onmousemove = function(e)
{
if(dragObj && dragObj.isDown)
{
dragObj.style.left = e.pageX -dragObj.adx+ dragObj.dx +"px";
dragObj.style.top = e.pageY -dragObj.ady+ dragObj.dy + "px";
}
}
}
set_drag_drop(document.getElementById("obj1"));
set_drag_drop(document.getElementById("obj2"));
set_drag_drop(document.getElementById("obj3"));
</script>
</html>

Javascript - Track mouse position

I am hoping to track the position of the mouse cursor, periodically every t mseconds. So essentially, when a page loads - this tracker should start and for (say) every 100 ms, I should get the new value of posX and posY and print it out in the form.
I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes. Any ideas on how I can get this up and running ?
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
document.Form1.posx.value = posX;
document.Form1.posy.value = posY;
var t = setTimeout(mouse_position,100);
}
</script>
</head>
<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
The mouse's position is reported on the event object received by a handler for the mousemove event, which you can attach to the window (the event bubbles):
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
}
})();
(Note that the body of that if will only run on old IE.)
Example of the above in action - it draws dots as you drag your mouse over the page. (Tested on IE8, IE11, Firefox 30, Chrome 38.)
If you really need a timer-based solution, you combine this with some state variables:
(function() {
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
}
else {
// Use pos.x and pos.y
}
}
})();
As far as I'm aware, you can't get the mouse position without having seen an event, something which this answer to another Stack Overflow question seems to confirm.
Side note: If you're going to do something every 100ms (10 times/second), try to keep the actual processing you do in that function very, very limited. That's a lot of work for the browser, particularly older Microsoft ones. Yes, on modern computers it doesn't seem like much, but there is a lot going on in browsers... So for example, you might keep track of the last position you processed and bail from the handler immediately if the position hasn't changed.
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
Open your console (Ctrl+Shift+J), copy-paste the code above and move your mouse on browser window.
Here's a solution, based on jQuery and a mouse event listener (which is far better than a regular polling) on the body:
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
What I think that he only wants to know the X/Y positions of cursor than why answer is that complicated.
// Getting 'Info' div in js hands
var info = document.getElementById('info');
// Creating function that will tell the position of cursor
// PageX and PageY will getting position values and show them in P
function tellPos(p){
info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);
* {
padding: 0:
margin: 0;
/*transition: 0.2s all ease;*/
}
#info {
position: absolute;
top: 10px;
right: 10px;
background-color: black;
color: white;
padding: 25px 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id='info'></div>
</body>
</html>
I believe that we are overthinking this,
function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>
ES6 based code:
let handleMousemove = (event) => {
console.log(`mouse position: ${event.x}:${event.y}`);
};
document.addEventListener('mousemove', handleMousemove);
If you need throttling for mousemoving, use this:
let handleMousemove = (event) => {
console.warn(`${event.x}:${event.y}\n`);
};
let throttle = (func, delay) => {
let prev = Date.now() - delay;
return (...args) => {
let current = Date.now();
if (current - prev >= delay) {
prev = current;
func.apply(null, args);
}
}
};
// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));
here is example
Just a simplified version of #T.J. Crowder and #RegarBoy's answers.
Less is more in my opinion.
Check out onmousemove event for more info about the event.
There's a new value of posX and posY every time the mouse moves according to the horizontal and vertical coordinates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Mouse Tracker</title>
<style>
body {height: 3000px;}
.dot {width: 2px;height: 2px;background-color: black;position: absolute;}
</style>
</head>
<body>
<p>Mouse tracker</p>
<script>
onmousemove = function(e){
//Logging purposes
console.log("mouse location:", e.clientX, e.clientY);
//meat and potatoes of the snippet
var pos = e;
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
</script>
</body>
</html>
if anyone still looking for answer then,
function track(e) {
console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);
paste this code in console to see immediate action
If just want to track the mouse movement visually:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
</style>
<body>
<canvas></canvas>
<script type="text/javascript">
var
canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
beginPath = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.addEventListener('mousemove', function (event) {
var x = event.clientX, y = event.clientY;
if (beginPath) {
ctx.lineTo(x, y);
ctx.stroke();
} else {
ctx.beginPath();
ctx.moveTo(x, y);
beginPath = true;
}
}, false);
</script>
</body>
</html>
document.addEventListener('mousemove', (event) => {
document.getElementById("line").style.top = event.clientY - 10 + 'px';
document.getElementById("lineY").style.left = event.clientX - 10 + 'px';
document.getElementById("pos").style.top = (event.clientY - 60) + 'px';
document.getElementById("pos").style.left = (event.clientX - 60) + 'px';
});
body {
position: relative;
height: auto;
min-height: 100% !important;
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.abs {
position: relative;
}
.lineY {
display: flex;
position: relative;
left: 0px;
background-color: black;
width: 2px;
height: 100vh;
min-height: 100%
}
.line {
display: flex;
position: relative;
background-color: black;
min-height: 2px;
width: 100%;
}
.circle {
display: flex;
position: absolute;
left: 0px;
top: 0px;
}
<div class='line' id="line"></div>
<div class='lineY' id="lineY"></div>
<svg height="100" width="100" id="pos" class="circle">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>
Irrespective of the browser, below lines worked for me to fetch correct mouse position.
event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top
I don't have enough reputation to post a comment reply, but took TJ Crowder's excellent answer and fully defined the code on a 100ms timer. (He left some details to the imagination.)
Thanks OP for the question, and TJ for the answer! You're both a great help. Code is embedded below as a mirror of isbin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {
height: 3000px;
}
.dot {
width: 2px;
height: 2px;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<script>
(function() {
"use strict";
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet, so don't add a duplicate dot
}
else {
// Use pos.x and pos.y
// Add a dot to follow the cursor
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
}
})();
</script>
</body>
</html>
Here is a solution
document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}
[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
console.table({
"mouse x": event.clientX,
"mouse y": event.clientY
});
}));
Here is the simplest way to track your mouse position
Html
<body id="mouse-position" ></body>
js
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
know more
This is the shortest way to get the coordinates of mouse pointer.
Just put your element where cursor is going to hover, inside $("")
$("***enter you element here***").mousemove(function(event)
{
console.clear()
var x = event.originalEvent.screenX;
var y = event.originalEvent.screenY;
console.log("x : "+x)
console.log("y : "+y)
})
Here’s a combination of the two requirements: track the mouse position, every 100 milliseconds:
var period = 100,
tracking;
window.addEventListener("mousemove", function(e) {
if (!tracking) {
return;
}
console.log("mouse location:", e.clientX, e.clientY)
schedule();
});
schedule();
function schedule() {
tracking = false;
setTimeout(function() {
tracking = true;
}, period);
}
This tracks & acts on the mouse position, but only every period milliseconds.
We recently had to find the current x,y position to enumerate elements over which the cursor is hovering independent of z-index. We ended up just attaching a mousemove event listener to document e.g.,
function findElements(e) {
var els = document.elementsFromPoint(e.clientX, e.clientY);
// do cool stuff with els
console.log(els);
return;
}
document.addEventListener("mousemove", findElements);

Make an image follow mouse pointer

I need a rocket to follow the movements of the mouse pointer on my website. This means it should rotate to face the direction of motion, and if possible, accelerate depending on the distance it has to cover.
Is this even possible ? jquery perhaps ?
by using jquery to register .mousemove to document to change the image .css left and top to event.pageX and event.pageY.
example as below
http://jsfiddle.net/BfLAh/1/
$(document).mousemove(function(e) {
$("#follow").css({
left: e.pageX,
top: e.pageY
});
});
#follow {
position: absolute;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="follow"><img src="https://placekitten.com/96/140" /><br>Kitteh</br>
</div>
updated to follow slowly
http://jsfiddle.net/BfLAh/3/
for the orientation , you need to get the current css left and css top and compare with event.pageX and event.pageY , then set the image orientation with
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
for the speed , you can set the jquery .animation duration to certain amount.
Ok, here's a simple box that follows the cursor
Doing the rest is a simple case of remembering the last cursor position and applying a formula to get the box to move other than exactly where the cursor is. A timeout would also be handy if the box has a limited acceleration and must catch up to the cursor after it stops moving. Replacing the box with an image is simple CSS (which can replace most of the setup code for the box). I think the actual thinking code in the example is about 8 lines.
Select the right image (use a sprite) to orientate the rocket.
Yeah, annoying as hell. :-)
function getMouseCoords(e) {
var e = e || window.event;
document.getElementById('container').innerHTML = e.clientX + ', ' +
e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}
var followCursor = (function() {
var s = document.createElement('div');
s.style.position = 'absolute';
s.style.margin = '0';
s.style.padding = '5px';
s.style.border = '1px solid red';
s.textContent = "🚀"
return {
init: function() {
document.body.appendChild(s);
},
run: function(e) {
var e = e || window.event;
s.style.left = (e.clientX - 5) + 'px';
s.style.top = (e.clientY - 5) + 'px';
getMouseCoords(e);
}
};
}());
window.onload = function() {
followCursor.init();
document.body.onmousemove = followCursor.run;
}
#container {
width: 1000px;
height: 1000px;
border: 1px solid blue;
}
<div id="container"></div>
Here's my code (not optimized but a full working example):
<head>
<style>
#divtoshow {position:absolute;display:none;color:white;background-color:black}
#onme {width:150px;height:80px;background-color:yellow;cursor:pointer}
</style>
<script type="text/javascript">
var divName = 'divtoshow'; // div that is to follow the mouse (must be position:absolute)
var offX = 15; // X offset from mouse position
var offY = 15; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {
var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';
}
document.onmousemove = follow;
</script>
</head>
<body>
<div id="divtoshow">test</div>
<br><br>
<div id='onme' onMouseover='document.getElementById(divName).style.display="block"' onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div>
</body>

Categories