Click here to Skip to main content
13,298,361 members (79,019 online)
Rate this:
Please Sign up or sign in to vote.
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?

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 ( != '')
    offsetLeft = offsetLeft - parseInt('px',''));
  return { x: offsetLeft , y: offsetTop };
Posted 27-Sep-12 0:14am
Updated 27-Sep-12 0:16am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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

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.

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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.171207.1 | Last Updated 27 Sep 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100