Can you tell me why my JS ain't working?
http://prime.programming-designs.com/designs/map/
It's suppose to move the mark div to the mouse xy when I click in the map.
Open your console, and you'll see:
Uncaught TypeError: Cannot read property 'MouseX' of undefined
It appears that on line 33 in your javascript code, document.Show is undefined.
document.Show.MouseX.value = tempX;
And when you click, you get this:
Uncaught TypeError: Cannot read property 'style' of null
around line 52 where mark is null:
<div id="map" onclick="
mark.style.left = tempX + 'px';
mark.style.top = tempY + 'px';
">
<div id="mark"></div>
You can move the entire <script> tag down toward the bottom, placing it just inside the closing </body> tag so that your document.getElementById('mark'); will find the element.
Like this:
<body>
<div id="map" onclick="
mark.style.left = tempX + 'px';
mark.style.top = tempY + 'px';
">
<div id="mark"></div>
</div>
<script type="text/javascript">
<!--
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var mark = document.getElementById('mark');
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}
//-->
</script>
</body>
Related
Using Javascript, I would like to reposition an object using a event drag.
Is tracking the distance the mouse moved the only way of getting the location of the object before drop?
In this example, there is not "drop location" as I will simply be updating the object's location based on where the user drags the mouse.
Thanks!
Cross Browser compatibility is an issue so the code is kind of funky. This code should work on any Browser.
This is based on the mouseup event.You could use the mousemove event instead.
If the event listener is added to the window, it will not work in IE8 and prior.
<!DOCTYPE html><html lang="en"><head><title>Floor Plan</title>
<style type="text/css">
#page{width:100%;padding:0;}
</style>
<body><div id="page" onmouseup="fpos(event)">
</div></body></html>
EOT;
ob_flush();
echo <<<EOT
<script type="text/javascript">//<![CDATA[
var fp = document.getElementById('fp');
var ptr = document.getElementById('point');
function fpos(e) {
var x = 0;
var y = 0;
e = e || window.event;
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var offSet = findPos(fp);
x -= offSet[0];
y -= offSet[1];
find(x,y);
}
function findPos(obj) {
var currentLeft = currentTop = 0;
if (obj.offsetParent) {
do {
currentLeft += obj.offsetLeft;
currentTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [currentLeft,currentTop];
}}
<script type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var tempX = 30;
var tempY = 30;
function getMousePos(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch/correct negative values
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form
document.MouseDisplay.MouseX.value = tempX;
document.MouseDisplay.MouseY.value = tempY;
return true;
}
// execute function
if (tempY < 30) {
alert('tempY is found to be less than 30');
}
</script>
I found this code at hotscript and codelifter http://www.codelifter.com/main/javascript/capturemouseposition1.html, it was from an old thread but I believe it's got what I need to achieve. I want to execute a function whenever the mouse Y position is less than 30.
I'm a beginner at programming, hope that I can slowly learn from samples here.
My question is, why is the alert command not triggered? What am I missing here. I did a simple button to call the function it works tho.
<script type="text/javascript">
function myFunction() {
alert('tempY is found to be less than 30');
}
</script>
Haven't tried your code but assuming it does work when the mouse moves, to see your alert just move that line inside the function :
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var tempX = 30;
var tempY = 30;
function getMousePos(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch/correct negative values
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form
document.MouseDisplay.MouseX.value = tempX;
document.MouseDisplay.MouseY.value = tempY;
// execute function
if (tempY < 30) {
alert('tempY is found to be less than 30');
}
return true;
}
I am developing a web page where I have set an image in a <div> dynamically.
It works in Firefox but it fails in IE.
The question is: how to get mouse pointer position in IE?
I am using the following code for getting mouse pointer position:
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
It works fine with Firefox.
Try this, This should work on all browsers including IE.
<html>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>
<script language="JavaScript1.2">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
//-->
</script>
</body>
</html>
Use jQuery and use event.pageX and event.pageY!
See http://api.jquery.com/event.pageY/
I solved this problem with this code
var CurX;
var CurY;
var IE = document.all?true:false;
if(IE){
CurX = window.event.clientX;
CurY = window.event.clientY;
}
else{
if (window.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
}
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
Use: clientX and clientY
Like this code:
var posx = 0;
var posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
I have the following event handler for my html element
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
I need to find the position of the mouse on the #seek-bar at the time of clicking. I would have thought the above code should work, but it gives incorrect result
Are you trying to get the position of mouse pointer relative to element ( or ) simply the mouse pointer location
Try this Demo : http://jsfiddle.net/AMsK9/
Edit :
1) event.pageX, event.pageY gives you the mouse position relative document !
Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2) offset() : It gives the offset position of an element
Ref : http://api.jquery.com/offset/
3) position() : It gives you the relative Position of an element i.e.,
consider an element is embedded inside another element
example :
<div id="imParent">
<div id="imchild" />
</div>
Ref : http://api.jquery.com/position/
HTML
<body>
<div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
$('#something').click(function (e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
console.log(xPos, yPos);
});
Try this:
jQuery(document).ready(function(){
$("#special").click(function(e){
$('#status2').html(e.pageX +', '+ e.pageY);
});
})
Here you can find more info with DEMO
In percentage :
$('.your-class').click(function (e){
var $this = $(this); // or use $(e.target) in some cases;
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var posX = offset.left;
var posY = offset.top;
var x = e.pageX-posX;
x = parseInt(x/width*100,10);
x = x<0?0:x;
x = x>100?100:x;
var y = e.pageY-posY;
y = parseInt(y/height*100,10);
y = y<0?0:y;
y = y>100?100:y;
console.log(x+'% '+y+'%');
});
If MouseEvent.offsetX is supported by your browser (all major browsers actually support it), The jQuery Event object will contain this property.
The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});
see here enter link description here
html
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
css
#myPosition{
background-color:red;
height:200px;
width:200px;
}
jquery
$(document).ready(function(){
$("#myPosition").click(function(e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
alert("X position: " + xPos + ", Y position: " + yPos);
});
});
Possible to get the current mouse coords with Javascript?
Source: http://javascript.internet.com/page-details/mouse-coordinates.html
<form name="Show">
X
<input type="text" name="MouseX" value="0" size="4">
<br>
Y
<input type="text" name="MouseY" value="0" size="4">
<br>
</form>
<script language="JavaScript">
var IE = document.all ? true : false;
if (!IE) {
document.captureEvents(Event.MOUSEMOVE)
}
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {// grab the x-y pos.s if browser is IE
tempX = e.clientX + document.body.scrollLeft;
tempY = e.clientY + document.body.scrollTop;
} else {// grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0) {
tempX = 0;
}
if (tempY < 0) {
tempY = 0;
}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}
</script>
Here is a compact function with a demonstration, it returns value with coordinates in .x and .y:
function mouseCoords(ev){
// from http://www.webreference.com/programming/javascript/mk/column2/
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
(I found quirksmode to be a good resource of JavaScript wisdom. Here is the some background of the function in case you want to dig deeper.)
you can get mouse coordinats in browser like this.
This can be done. Just googled and got the following code
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}