Get the position of HTML element using JQuery

Get the location on screen of HTML element using JQuery
javascript code

<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>

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

Related Posts to : Get the position of HTML element using JQuery
checking if a HTML element is visible or hidden under JQuery -
Show hint when focus on html element using JQuery -
Get Mouse Position using JQuery -
How to make html element hidden using CSS -
opacity of HTML element- transparent -
Change and get html content of element -
Get Width and Height -Inner and Outer for HTML element -
Remove HTML element or Delete its content -
removing focus border from a HTML element -
Sort HTML table from JQuery -

Topic Tags

JQuery Position

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
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