Sun Jan 06, 2013 12:10 pm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Find the position of an element in jQuery</title>
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("button").click(function(){
$(function() {
$("div#show").append("<br/>Div#:- Top: " + $('div.info').position().top + "<br/>")
.append("Left: " + $('div.info').position().left);
$("div#show").append("<br/>Paragraph#: Top: " + $('#hash').position().top + "<br/>")
.append("Left: " + $('#hash').position().left);
});
});
});
</script>
<style type="text/css">
div.info
{
border:solid 1px #45F455;
background-color:#FF5FF5;
}
</style>
</head>
<body>
<div class="info">
Position of this div element will be displayed.
</div>
<p id="hash">
The Position of this paragraph element will be displayed.
</p>
<div id="show">
</div>
<br />
<button>Show location on screen</button>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.