Posted By

wizard04 on 08/18/08


Tagged

scroll javascript element position dimensions


Versions (?)

Element Dimensions


 / Published in: JavaScript
 

  1. //get current dimensions and position of an element
  2. //usage: var dims = new ElementDimensions(elementToMeasure);
  3. function ElementDimensions(elem)
  4. {
  5. this.inner = { //content and padding; gives 0 for inline elements (you can use scrollWidth/Height if it's inline)
  6. width: elem.clientWidth,
  7. height: elem.clientHeight
  8. };
  9. this.outer = { //everything (content, padding, scrollbar, border)
  10. width: elem.offsetWidth,
  11. height: elem.offsetHeight
  12. };
  13. this.scroll = {
  14. //width & height of entire content field (including padding), visible or not
  15. //incorrect in Opera; it doesn't include the padding
  16. width: elem.scrollWidth,
  17. //if there are no scrollbars, IE gives the actual height of the content instead of the height of the element
  18. height: elem.scrollHeight<elem.clientHeight ? elem.clientHeight : elem.scrollHeight,
  19.  
  20. //scroll position of content & padding
  21. left: elem.scrollLeft,
  22. top: elem.scrollTop
  23. };
  24.  
  25. //position of element from the top-left corner of the document
  26. var tmp = elem;
  27. this.left = this.top = 0;
  28. while(tmp.offsetParent)
  29. {
  30. this.left += tmp.offsetLeft;
  31. this.top += tmp.offsetTop;
  32. tmp = tmp.offsetParent;
  33. }
  34. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on April 16, 2014

The latest: https://gist.github.com/wizard04wsu/8871791

You need to login to post a comment.