Home > javascript, Tech > Javascript: Calculate Element Position

Javascript: Calculate Element Position

This is first post about Javascript snips which I feel interesting to learn or know. Most likely, the snips should be cross-browser compatible. But the term “cross-browser compatible” is awlays with certain condition. More accurate, they are the best effort to make them to be “cross-browser compatible”. Most of them can be easily found from Internet. They might be modified to ease my own understanding. I will not give any explanation on the script snip in any means, unless I have time to do so. Anyway, they should be not so difficult to be understood, simply with the help from Internet.

Just a note, I will put the snips into a function called underscore, which serves as the namespace for these snips collection.

Here we go, let’s start with calcuating the element’s position.

Script

underscore = {
    position: function (element) {
        var p = {x: element.offsetLeft || 0, y:element.offsetTop || 0};
        while (element = element.offsetParent) {
            p.x += element.offsetLeft;
            p.y += element.offsetTop;
        }
        return p;
    }
}

Usage

var divElement = document.getDocumentById("myid");
var p = underscore.position(divElement);
alert("position x:" + p.x + "; y:" + p.y);

Reference

Advertisements
Categories: javascript, Tech
  1. September 30, 2006 at 12:26 pm

    Hello šŸ™‚
    Just a simple point of view about this function:
    if an element hasn’t offsetLeft property, used browser is really old or not compatible with function itself.
    And if offsetLeft is not present, offsetParent isn’t present too.
    I didn’t add “|| 0” on my bytefx function because if offsetLeft or offsetRight are 0, this function need to do one or two unuseful operations while if offsetLeft and then Right is null, you can skip every kind of function that’s based on this one (if p.x !== null){//do stuff}

    In your example, this is not possible because returned number will be atleast 0 and never null … then in my opinion this version:

    var position = {x:element.offsetLeft, y:element.offsetTop};
    while(element = element.offsetParent){
    position.x += element.offsetLeft;
    position.y += element.offsetTop;
    };
    return position;

    is better and even light for a crossbrowser lib or code šŸ™‚

  2. September 30, 2006 at 12:35 pm

    uhm … I ment undefined … not null, sorry šŸ˜€

  3. June 18, 2008 at 5:12 pm

    Somehow i missed the point. Probably lost in translation šŸ™‚ Anyway … nice blog to visit.

    cheers, Contestable
    .

  4. April 15, 2009 at 11:15 pm

    Hey,

    Please correct this error in your code:
    “getDocumentById” should be “getElementById”

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: