Solved

Jquery get X and Y coordfinates of an elemnet within a DIV

Posted on 2013-06-27
4
187 Views
Last Modified: 2013-07-17
Hi

I have a container element of 980px. I want to find the x and y coordinates of an element within that container element.

Im using .position() .
This retrieves the coordinates in relation to the whole viewport. How can i get the coordinates in relation to the container eleemnt?

Thanks
0
Comment
Question by:coolispaul
  • 2
4 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39281858
I think you want offset http://api.jquery.com/offset/
0
 

Author Comment

by:coolispaul
ID: 39281871
hmm i tried that but where do you tell it watch element to offset it against?
0
 
LVL 53

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39282335
Works for me
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	console.log ($('#fred').position());
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div style="width: 200px; height: 200px; border: 1px solid green">
	<div style="left: 30px;top: 17px; position: absolute; width: 50px; height: 29px; background: blue" id="fred">
	</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 53

Expert Comment

by:Julian Hansen
ID: 39332496
Can you give a bit more info on what the solution was here.
A B grade means the solution given lacked some information or required you to do a good amount of extra work to resolve the problem. When closing the question, the asker should explain why a B grade was awarded.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now