Question

I’ve been coding a bit of Javascript to place a ducky randomly on this page.

I wanted to make it hide on the side of objects (like the posts), but I ended up having to hardcode quite a bit of it, since I couldn’t get a way to properly retrieve the real position of relative objects with Chrome. I read quite a few things about it, and used the recursive offsetParent way, but didn’t get any good results.

The last bit of code I tried was this:

 var getPost = function (obj) {
    var pos = {'x':0,'y':0};
    if(obj.offsetParent) {
        while(1) {
          pos.x += obj.offsetLeft;
          pos.y += obj.offsetTop;
          if(!obj.offsetParent) {
            break;
          }
          obj = obj.offsetParent;
        }
    } else if(obj.x) {
        pos.x += obj.x;
        pos.y += obj.y;
    }
    return pos;
  }

This code doesn’t work on Chrome, except on objects with an absolute position (set with CSS).

Is there a good, cross-browser way to achieve this?

Answer 1

Alright, my problem was somewhere else. This is what I was doing to call the function:

var allPosts = document.getElementsByClassName('post-outer');

for (post in allPosts) {
   console.log('Post has position '+getPos(post));
}

You can tell I’m not so used to Javascript’s recursive behavior in the for loop, so the following code actually fixes my issue:

var allPosts = document.getElementsByClassName('post-outer');

for (var i=0, len=allPosts.length; i<len; ++i ){
  console.log('Post position is '+getPos(allPosts[i]).y);
}

Thanks all for your help 🙂