HTML and JavaScript code are shown below and I have checked it in mozila and chrome and it's not working.
This is the HTML part
<form name ="show">
<input type="text" name="mouseXField" >Mouse X Position<br />
<input type="text" name="mouseYField" >Mouse Y Position<br />
</form>
This is javascript part
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!mie) {
document.captureEvent(Event.MOUSEMOVE);
document.captureEvent(Event.MOUSEDOWN);
}
document.onmousemove = mousePos();
document.onmousedown = mouseClicked();
var mouseClick=0;
var keyClicked=0;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!mie) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
document.show.mouseXField.value = mouseX;
document.show.mouseYField.value = mouseY;
return true;
}
Here is a solution with jquery : fiddle
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
tempX = e.pageX
tempY = e.pageY
}
$('#spnCursor').html("x: " + tempX+" y: "+ tempY);
return true
}
Where is the event variable referenced in your else block declared?
Could you also post the html?
A quick google revealed a few jsfiddle pages which achieve what you're after.
Related
Basically what I want to achieve is to drag some div within another container div. Inner div should stop when it reaches the boundaries of the container div. I managed to do the most parts. But the problem is that if I drag inner div slowly & carefully it stops where it is supposed to be on the edges, however if I drag it faster, it sometimes overflow the edges or stops way before the edges. What is the problem here? What should I do to fix this?
Here is full code
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
lastMouseX = mouseX;
}
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
lastMouseY = mouseY;
}
setCurrentElementPosition(lastElementX, lastElementY);
}
}
Above code runs on mouse move event changing inner div's position.
Here's my solution for you, I've programmed video games before, and you run into this problem a lot.
You're checking if it'll go out, but not doing anything if it does! If it goes outside, you have to set it to the edge.
https://jsfiddle.net/7btv7oqy/3/
var lastElementX = 0; //last X position of element
var lastElementY = 0; //last Y position of element
var lastMouseX = 0; //last X position of mouse
var lastMouseY = 0;//last Y position of mouse
var mouseX = 0; //current mouse position X
var mouseY = 0; //current mouse position Y
var currentElement = null; //currently selected div
var elementWidth = 0;
var elementHeight = 0;
var container = null; //container div
var isMouseDown = 0; //if greater than zero, mouse is down
//limits of container div
var bottomLimit = 0;
var topLimit = 0;
var leftLimit = 0;
var rightLimit = 0;
function init() {
container = document.getElementsByClassName("container")[0];
topLimit = container.getBoundingClientRect().top;
bottomLimit = container.getBoundingClientRect().bottom;
leftLimit = container.getBoundingClientRect().left;
rightLimit = container.getBoundingClientRect().right;
document.addEventListener("mousedown", function mouseDown(e) {
e.preventDefault();
++isMouseDown;
document.addEventListener("mousemove", mouseMove);
setCurrentElement(getElementUnderMouse(e)); //set current element
currentElement.style.position = "absolute";
lastElementX = currentElement.getBoundingClientRect().left;
lastElementY = currentElement.getBoundingClientRect().top;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
document.addEventListener("mouseup", function mouseUp(e) {
e.preventDefault();
--isMouseDown;
setCurrentElement(null);
document.removeEventListener("mousemove", mouseMove);
});
}
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
// report(e);
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the right edge, set to right edge
if (diffX + lastElementX + elementWidth >= rightLimit) {
lastElementX = rightLimit - elementWidth;
}
//check if it would go off the left edge, set to left edge
if(diffX + lastElementX <= leftLimit) {
lastElementX = leftLimit;
}
}
//this will always happen:
lastMouseX = mouseX;
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the bottom edge, set to bottom edge
if(diffY + lastElementY + elementHeight >= bottomLimit) {
lastElementY = bottomLimit - elementHeight;
}
//check if it would go off the top edge, set to top edge
if(diffY + lastElementY <= topLimit) {
lastElementY = topLimit;
}
}
//this will always happen:
lastMouseY = mouseY;
setCurrentElementPosition(lastElementX, lastElementY);
}
}
function setCurrentElementPosition(left = null, top = null) {
if(currentElement) {
currentElement.style.top = top + 'px'
currentElement.style.left = left + 'px';
}
}
function setCurrentElement(element) {
currentElement = element;
if(element) {
elementWidth = currentElement.offsetWidth;
elementHeight = currentElement.offsetHeight;
} else {
elementWidth = 0;
elementHeight = 0;
}
}
function hasClass(element, cls) {
return ("" + element.className + "").indexOf("" + cls + "") > -1;
}
function getElementUnderMouse(e) {
var x = e.clientX;
var y = e.clientY;
return document.elementFromPoint(x, y);
}
function report(e) {
console.log("isMouseDown: " + isMouseDown);
console.log("mouseX: " + e.clientX);
console.log("mouseY: " + e.clientY);
console.log("currentElement: " + currentElement);
console.log("currentElement top: " + currentElement.getBoundingClientRect().top);
console.log("currentElement bottom: " + currentElement.getBoundingClientRect().bottom);
console.log("container top: " + container.getBoundingClientRect().top);
console.log("container bottom: " + container.getBoundingClientRect().bottom);
}
init();
EDIT: Not sure why it's missing by one pixel at the right and bottom, you'll have to do some investigation on that front. Seems like it's not taking into consideration the border, despite you using offsetWidth. Good luck!
Here's my take; I've decoupled the element's movement from diffX/diffY:
https://jsfiddle.net/ttyrtjez/
// in onmousedown
offsetX = e.clientX - lastElementX;
offsetY = e.clientY - lastElementY;
// in onmousemove
var newElementX = mouseX - offsetX;
var newElementY = mouseY - offsetY;
if (newElementX + elementWidth >= rightLimit - 1) newElementX = rightLimit - elementWidth - 2;
if (newElementX < leftLimit) newElementX = leftLimit;
if (newElementY + elementHeight >= bottomLimit - 1) newElementY = bottomLimit - elementHeight - 2;
if (newElementY < topLimit) newElementY = topLimit;
setCurrentElementPosition(newElementX, newElementY);
var clicks = 0;
var lastClick = [0, 0];
document.getElementById('imageView').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
This is the code for drawing line with two mouse clicks.But i dont know waht to call in the button(i have a toolbar with various tools)
<input type="image" src="images/line.ico" width="25" height="25">
Please help
Thanks in advance!
I modified your code to correct it. Try this.... :)
<html>
<head><title></title>
<script>
var clicks = 0;
var lastClick = [0, 0];
var element;
function startDrawing()
{
element = document.getElementById('imageView');
if(element != null || element != undefined)
{
element.addEventListener('click', drawLine, false);
}
}
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
}
</script>
</head>
<body>
<input type="image" src="images/line.ico" width="25" height="25" onclick="startDrawing()">
<!--Your image element will be here -->
</body>
</html>
I have tried the following code but it is not working in full screen.
public static native void hello1()
/*-{
var body=$doc.getElementsByTagName("body")[0];
var posx=0;
var posy=0;
body.addEventListener("click",function (e)
{
if (e.clientX ||e.clientY)
{
posx = e.clientX;
posy = e.clientY;
}
alert('Mouse position is: X='+posx+' Y='+posy);
});
}-*/;
public static native void hello1()
/*-{
var body=$doc.getElementsByTagName("body")[0];
var posx;
var posy;
$wnd.addEventListener("click",function (e)
{
if (!e) var e = $wnd.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX ||e.clientY)
{
posx = e.clientX+$doc.body.scrolleft+$doc.scrollleft;
posy = e.clientY+$doc.body.scrolltop+$doc.srolltop;
}
alert('Mouse position is: X='+posx+' Y='+posy);
});
}-*/;
I have a simple event listener and I am trying to pass variables to a function but it's not working... this is what I have:
window.onload = function () {
document.getElementById('cursor').addEventListener("mousedown", mousePos, false);
}
function mousePos(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", function () {
mousemoveCalc(x, y);
}, false);
}
function mousemoveCalc(e, x, y) {
console.log(e);
console.log(x); //undefined
console.log(y); //undefined
}
I'm getting undefined for x and y but I do not know how to solve it =/ They are not undefined however in mousePos =/
How do i fix this ?
See this fiddle to see if this is close to what you are looking for.
http://jsfiddle.net/cF6fE/2/
var posx = 0;
var posy = 0;
window.onload = function() {
document.getElementById('cursor').addEventListener("mousedown", mousePos, false);
}
function mousePos(e) {
posx = e.clientX;
posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", mousemoveCalc);
}
function mousemoveCalc(e) {
console.log(e);
var x = e.clientX;
var y = e.clientY;
var xOffset = posx-x;
var yOffset = posy-y;
console.log(x);
console.log(y);
console.log(xOffset);
console.log(yOffset);
}
Update:- with Function.bind
http://jsfiddle.net/uGuHk/
function mousePos(e) {
var posx = e.clientX;
var posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", mousemoveCalc.bind(this, posx,posy));
}
function mousemoveCalc(xax,yax,e) {
console.log(e);
var x = e.clientX;
var y = e.clientY;
var xOffset = xax-x;
var yOffset = yax-y;
console.log(x); //undefined
console.log(y); //undefined
console.log(xOffset); //undefined
console.log(yOffset); //undefined
}
Update2:- With Closure
http://jsfiddle.net/FG6uW/
function mousePos(e) {
var posx = e.clientX;
var posy = e.clientY;
document.getElementById('cursor').addEventListener("mousemove", function() {
(function(x, y) {
mousemoveCalc(x, y)
})(posx, posy)
});
}
function mousemoveCalc(xax, yax) {
var x = event.clientX;
var y = event.clientY;
var xOffset = xax - x;
var yOffset = yax - y;
console.log(xax);
console.log(yax);
document.getElementById('cursor').innerText = xax + '-' + yax + '|' + xOffset + '-' + yOffset;
console.log(xOffset);
console.log(yOffset);
}
I have a sample code:
javascript:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
}
function positionButton(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
In html:
<div id="button" style="position: absolute; opacity: 1; z-index: 100; width:27px; height:20px; overflow:hidden">
test test
</div>
<script type="text/javascript" src="script.js"></script>
<script>
var bootstrap = new bootstrap('button');
bootstrap.init();
</script>
When I run code, result not run event mousemove, how to fix it?
The style of the button.
Your code:
width:27px;height:20px;
I change to
width:60px;height:50px;
I try it on IE9.It works.
Run this jsFiddle that I created with a slight modification of your code:
function bootstrap(id) {
this.id = id;
this.init = function() {
document.getElementById(this.id).onmousemove = positionButton;
};
function positionButton(e) {
e = e || window.event;
var cursor = {
x: 0,
y: 0
};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
} else {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
var elem = document.getElementById(this.id);
elem.style.position = 'absolute';
elem.style.top = cursor.y - 10 + 'px';
elem.style.left = cursor.x - 30 + 'px';
}
}
var bootstrap = new bootstrap('button');
bootstrap.init();
It works correctly with Chrome, Safari and FFX.
Have you any error in your browser console?
Is script.js correctly downloaded?
What browser are you using?