Question

38

How do I get the position of an element after css3 translation in JavaScript?

rated 0 times [ 39] [ 1] / answers: 1 / hits: 30662 / 14 Years ago, sat, february 12, 2011, 12:00:00

I saw this posted in 2 different forms on stackoverflow, but the solutions don't work for me.

Essentially, I have an item that I will translate. When I do a obj.style.left or obj.offsetLeft, after the element has been translated, I get 0. Is there anyway I can get the coordinates/position of an element after it has been translated with css3?

I can't use jQuery (because I can't and also because I want to understand the solution, not just use the library without understanding what is happening underneath)

Any ideas?

Thanks much!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elvisissacg

Add To Favorites

Follow

Total Points: 410

Total Questions: 108

Total Answers: 121

Location: Monaco

Member since Tue, Jun 16, 2020

4 Years ago

answered 14 Years ago trayvon · Accepted Answer

You can use getBoundingClientRect():

Imagine the following html block:

<div class=centralizer popup>

    <div class=dragger></div>

</div>

And the style:

body {

    background:#ccc;

}

.centralizer {

    position:absolute;

    top:150px;

    left:170px;

    width:352px;

    height:180px;

    overflow:auto;

    -webkit-transform: translateY(-50%) translateX(-50%);

    -moz-transform: translateY(-50%) translateX(-50%);

    -ms-transform: translateY(-50%) translateX(-50%);

    transform: translateY(-50%) translateX(-50%);

}

.popup {

    background:white;

    box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.3);

    border-radius:3px;

}

.dragger {

    background:#eee;

    height:35px;

    border-radius:3px 3px 0 0;

    border-bottom:1px solid #ccc;

}

Now you can use the following javascript to get the correct position:

var popup = document.querySelector('.popup');

var rect = popup.getBoundingClientRect();



console.log(popup.getBoundingClientRect(): n + x:  + rect.left + ny:  + rect.top);

You can check the result in the jsfiddle:

I tested on FF, IE and chrome, and it worked on all my tests.