This article will show you how you can get the coordinate of
the div control on moue move using jquery in asp.net.
Some of my previous articles are as follows: Get
User Detail Like City,County,Region,Zip Code Using IP Address In Asp.Net, Facebook
Style Lightbox jQuery Plugin To Display Images Like Facebook In Asp.Net, Webcam
Integration Using jQuery Webcam Plugin In Asp.Net, Asp.Net
Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css, Simple
Login Form In Asp.Net Using C#.Net and VB.Net | How to Create Login Form in
Asp.Net Using C#, Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in
Asp.Net Using C#.Net.
So for this article first we will create a new asp.net app;ication and add the below jquery reference in the header of the page.
So for this article first we will create a new asp.net app;ication and add the below jquery reference in the header of the page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
Now check the below jquery code. This code we will add into
the body of the page.
$("#divForCordinate").mousemove(function (event) {
var
xcordinate = event.clientX;
var
ycordinate = event.clientY;
$("#divx").html("X Cordinate : " + xcordinate);
$("#divy").html("Y Cordinate : " + ycordinate);
});
|
Now check he complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2"
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to
Get Mouse Pointer Cordinate Inside a Div Using jQuery In Asp.Net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divForCordinate" style="width: 300px; height: 300px; background: #0094ff; border: 3px solid
#e7e7e7;">
</div>
<div id="divx"></div>
<div id="divy"></div>
<script>
$("#divForCordinate").mousemove(function (event) {
var
xcordinate = event.clientX;
var
ycordinate = event.clientY;
$("#divx").html("X
Cordinate : " + xcordinate);
$("#divy").html("Y
Cordinate : " + ycordinate);
});
</script>
</form>
</body>
</html>
|
Here I have takem three div one for object div, second for x
cordinate and third for y cordinate. Now we have done run the application to check
the output.
About the Author
0 comments:
Please let me know your view