How to get the element position

Question

0.00/5 (No votes)

See more:

Hi all,

i want get the element postion using javascript. it work as i am using below
javascript method. but when i change the browser resolution then it give me the
element position correct. it always calculated the position acording to
width: 1024 and height:800

How to caluclate the postion according to resolution?

JavaScript

function GetPosition(sender) {
	
  var offsetTrail = sender;
  var offsetLeft = 0;
  var offsetTop = $(sender).outerHeight();
  var p;var count = 0;
  while (offsetTrail) {
    offsetLeft += offsetTrail.offsetLeft;
    offsetTop += offsetTrail.offsetTop;
    p = offsetTrail;count = count + 1;
    offsetTrail = offsetTrail.offsetParent;
   }

	
  if (sender.style.marginLeft != '')
    offsetLeft = offsetLeft - parseInt(sender.style.marginLeft.replace('px',''));
  return { x: offsetLeft , y: offsetTop };
}

Posted 26-Sep-12 23:14pm

amit_83

Updated 26-Sep-12 23:16pm

D-Kishore

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Stephen Hewison · Answer 1 · 2012-09-27T00:03:00

Solution 1

You code is going to give you the bottom left corner of the element. By starting with:

JavaScript

var offsetTop = $(sender).outerHeight();

All positioning works to the top left point of the element. If you loop through offsetLeft and offsetTop like you have in your example. You will get the distance from the top left corner of the element to the top left corner of the page. But where you start with the element height you'll also have this factored in to give you the bottom left.

This result will always be the same if elements are absolutely positioned and anchored to the top left.

Only if you have centre, right or bottom anchors or relative (%) sizes will a change of browser size effect the position of the element.

The following is a snippit from the script I use with my applications.

JavaScript

var uiHelper = {
  ElementPos: function(el) {
    var result = { x: 0, y: 0 };
    while(el != null) {
      if(el.offsetLeft) {
        result.x += el.offsetLeft;
        result.y += el.offsetTop;
      }
      el = el.parentNode;
    }
  }
}

Posted 27-Sep-12 0:03am

Stephen Hewison

Updated 27-Sep-12 0:04am

v2

Comments

amit_83 27-Sep-12 6:47am

i used ur logic but top position is not coming correct, i have used master form and page has 1 usercontrol also.is there another thing which can be helpfull?

Stephen Hewison 27-Sep-12 7:18am

I use my script framework with application using master pages without any problems. I use this script in a drag and drop wysiwyg content designer and it works without any problems. I'd suggest simplifying the problem. Take the script out of your application. Create a test page with just a couple of html elements and test the script. Once you know the script is working, you can rule that out as your problem and look at other things. Also, how do you know the top position is not correct? How is it not correct? What should it be? What value are you getting?

amit_83 27-Sep-12 7:23am

Thanks for reply. i am opening the popup when we clicked on a image button,
then popup top as well as left both position is not coming correct.
we have image button in table in each row.
and i have used lot of div tAG AS PARENT can u tell me why is this problem coming?

Stephen Hewison 27-Sep-12 7:26am

You may be asking the wrong question. Like I said, rule out problems with your script. Take a simple page, nest a few divs with known positions and test the script to make sure you're getting the correct values. Beyond that, without seeing the full html and looking at the element you're testing it's not going to be possible to provide you with an answer.

amit_83 27-Sep-12 7:32am

OK, Thanks
i will try

Stephen Hewison 27-Sep-12 7:37am

The key to getting a good answer is to provide all the information required to reproduce to the problem, but to do it in a way that requires CodeProject members to look at the least amount of code. So once you've tested your script and proved it works. Try and create the most basic example which illustrates the problem. Then update your question with the code.