This
article will show you how you can get the Contenteditable div in asp.net using
jqery.
So for this
article first we will create a new asp.net application and add the below
mention jquery library reference into the header of the page.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
After this we will add div control on the page.
X axis -
<span id="xaxisvalue"></span>
<br />
Y axis -
<span id="yaxisvalue"></span>
<div id="parentDiv"
style="width: 300px; height: 200px; background-color:
green;">
</div>
|
In above I have taken a div in which I will find the coordinate on mouse moving. Now check the jquery code to get the output.
<script>
$(document).ready(function () {
$("#parentDiv").mousemove(function (e) {
$("#xaxisvalue").html(e.pageX);
$("#yaxisvalue").html(e.pageY);
});
});
</script>
|
In above code I have attached the mouseover event to the parent div control. Now have a look of the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery To Get
Cursor Position in Contenteditable Div</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#parentDiv").mousemove(function (e) {
$("#xaxisvalue").html(e.pageX);
$("#yaxisvalue").html(e.pageY);
});
});</script>
</head>
<body>
<form id="form1" runat="server">
X axis -
<span id="xaxisvalue"></span>
<br />
Y axis -
<span id="yaxisvalue"></span>
<div id="parentDiv"
style="width: 300px; height: 200px; background-color:
green;">
</div>
</form>
</body>
</html>
|
Now lets execute the code and check the output.
About the Author
0 comments:
Please let me know your view