www.webdeveloper.com
Results 1 to 7 of 7

Thread: Find top/left position of div?

  1. #1
    Join Date
    Mar 2008
    Location
    Gulf Breeze, Florida
    Posts
    171

    Find top/left position of div?

    Hey I have <div> that I have given the id "demo" could someone show me how to find the top and left position of that div?

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    Code:
    function getPosition(who){
        var T= 0,L= 0;
        while(who){
            L+= who.offsetLeft;
            T+= who.offsetTop;
            who= who.offsetParent;
        }
        return [L,T];    
    }
    alert(getPosition(document.getElementById('demo')))

  3. #3
    Join Date
    Mar 2008
    Location
    Gulf Breeze, Florida
    Posts
    171
    Thankyou mrhoo!

  4. #4
    Join Date
    Apr 2009
    Posts
    36
    Quote Originally Posted by mrhoo View Post
    Code:
    function getPosition(who){
        var T= 0,L= 0;
        while(who){
            L+= who.offsetLeft;
            T+= who.offsetTop;
            who= who.offsetParent;
        }
        return [L,T];    
    }
    alert(getPosition(document.getElementById('demo')))
    I'm trying to find a solution to an issue I'm having and think this could be the answer with some modifications, but I can't for the life of me get it to work as I intended could someone help me out?

    I'm trying to get the left position of a div that is centred on a page with a width of 960px and auto margins, then having got its left position I want to supply that to the css so I can reduce the width of the div whilst keeping its left positioning.

    TBH I was a little puzzled by the who bit but assumed it was set when the target demo was parsed in the example before, so I therefore set a variable to try and substitute that.

    Code:
    onload=function() {
    	var nav_height = document.getElementById('fixed_position').offsetHeight;
    	document.getElementById('content').style.minHeight = nav_height+'px';
    }
    
    var who = "fixed_position";
    getPosition;
    
    function getPosition(who){
        var T= 0,L= 0;
        while(who){
            L+= who.offsetLeft;
            T+= who.offsetTop;
            who= who.offsetParent;
        }
        alert [L,T]; 
    	document.getElementById('fixed_position').style.left = L+'px';
    	document.getElementById('fixed_position').style.width = '200px';
    }

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    use calc() in CSS, which works in all browsers.


    Code:
    #fixed_position { left: calc(100% - 200px); }

  6. #6
    Join Date
    Mar 2011
    Posts
    1,133
    caniuse.com shows less than universal support for calc() - notably IE<=8, Opera, and the Android browsers, so I'd use it with caution.
    Rick Trethewey
    Rainbo Design

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    1. opera is moving to wekbit momentarily, so strike that excuse.
    2. why would anyone need to calc hundreds of pixels of margin on a phone?; there's no room for such a design, so i don't think that's an issue.
    3. the posted solutions don't work in old IE either, at least not in quirks mode.

    4. the posted code snips don't take into account zoom, scrolling, or border-widths (which CSS calc does), so let's not pretend that there's a perfect solution i'm steering anyone away from...

    in consideration of all that, i recommended a solution to help the most people with the least effort.

    besides, if you want to go the dom route, it better to use .getClientRects() and .getBoundingClientRect(), for the reasons mentioned in #4.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles