Switch to full style
JQuery Examples
Post a reply

Get the position of HTML element using JQuery

Sun Jan 06, 2013 12:10 pm

Get the location on screen of HTML element using JQuery
javascript code
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Find the position of an element in jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>

<script type='text/javascript'>
$(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);


<style type="text/css">
border:solid 1px #45F455;
<div class="info">
Position of this div element will be displayed.
<p id="hash">
The Position of this paragraph element will be displayed.
<div id="show">
<br />
<button>Show location on screen</button>

Post a reply
  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     -  
 removing focus border from a HTML element     -  
 Get Width and Height -Inner and Outer for HTML element     -  
 Remove HTML element or Delete its content     -  
 add pagination to html page using JQuery     -  

Topic Tags

JQuery Position