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

by

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.

More Related Contents:

  1. Switch classes on click of button
  2. Change class value javascript in event onclick?
  3. Making a Mobile friendly website [closed]
  4. How can I modify with css an image appended with javascript?
  5. How to fade animate background images (full size) [closed]
  6. weird thing. working fiddle doesn’t work on html [closed]
  7. Scroll Function working in reverse order [closed]
  8. How to force the browser to reload cached CSS and JavaScript files
  9. How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
  10. horizontal scrollbar on top and bottom of table
  11. Show and hide divs at a specific time interval using jQuery
  12. How do I detect “shift+enter” and generate a new line in Textarea?
  13. offsetting an html anchor to adjust for fixed header [duplicate]
  14. Fixed positioning in Mobile Safari
  15. Disable Drag and Drop on HTML elements?
  16. AngularJS: Better way to watch for height change
  17. Styling [duplicate]
  18. Force browser to refresh CSS, JavaScript, etc
  19. Synchronized scrolling using jQuery?
  20. Toggle visibility property of div
  21. option.style.display = “none” not working in safari [duplicate]
  22. Add a transform value to the current transforms that are already on the element?
  23. How do I detect the inherited background-color of an element using jQuery/JS?
  24. getElementsByClassName to change the style of elements when event occurs [duplicate]
  25. Why is element not being shown before alert?
  26. Calculate the bounding box’s X, Y, Height and Width of a rotated element via JavaScript
  27. Phonegap Application text and layout too small
  28. The purpose of starting an initial comment with /*! in javascript and css files
  29. HTML5 Video duration without playing video
  30. Combination of animation and transition not working properly

Leave a Comment