Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript CSS
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 (sender.style.marginLeft != '')
    offsetLeft = offsetLeft - parseInt(sender.style.marginLeft.replace('px',''));
  return { x: offsetLeft , y: offsetTop };
}
Posted 27-Sep-12 0:14am
amit_83999
Edited 27-Sep-12 0:16am
v2

1 solution

Rate this: bad
good
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;
    }
  }
}
 
  Permalink  
v2
Comments
amit_83 at 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 at 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 at 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 at 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 at 27-Sep-12 7:32am
   
OK, Thanks
i will try
Stephen Hewison at 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
0 OriginalGriff 381
1 Sergey Alexandrovich Kryukov 245
2 Marcin Kozub 225
3 Praneet Nadkar 217
4 /\jmot 189
0 OriginalGriff 8,284
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,614
3 Maciej Los 4,989
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 27 Sep 2012
Copyright © CodeProject, 1999-2014
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