pTutorial

New way to learn Programming

How to get the mouse position in jquery

JQuery Mouse Position Example

Simple JQuery example to get the mouse postion with the help of live example. The mousemove event is used to track the mouse movement within the selected element.

The event.pageX and event.pageY is the JQuery property to get postion of mouse, relative to the left, right edge of the document respectivily.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://freeonlinecompiler.ptutorial.com/
js/jquery.min.js"></script>

</head>
<body id="test">

<p>The mouse pointer position is at: <span></span></p>

<div id="hh" class="uk"></div>
</body>
</html>                                		

CSS

<style>
.uk{
background: #2aabd2;
height: 30px;
width: 30px;
display: none;
left: 1230px;
top: 500px;
position: fixed;
border-radius: 5px;
text-decoration: none;

}
.h{
margin: 5px;
font-size: 30px;

}
</style>

JQuery Mouse Position Example

<script>
$(document).ready(function(){
$(document).mousemove(function(event){ 
if(event.pageY >= 500){
$("#hh").css("display","block");
}else{
$("#hh").css("display","none");
$("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
}

});
});
</script>

Download

See Also


QUOTES OF THE DAY

Knowledge without integrity is dangerous and dreadful.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER