Posted By

mifly on 03/13/08


Tagged

javascript


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jamesming
Jman


full height


 / Published in: JavaScript
 

from pro javascript sample code

  1. // Find the full, possible, height of an element (not the actual,
  2. // current, height)
  3. function fullHeight( elem ) {
  4. // If the element is being displayed, then offsetHeight
  5. // should do the trick, barring that, getHeight() will work
  6. if ( getStyle( elem, 'display' ) != 'none' )
  7. return elem.offsetHeight || getHeight( elem );
  8.  
  9. // Otherwise, we have to deal with an element with a display
  10. // of none, so we need to reset its CSS properties to get a more
  11. // accurate reading
  12. var old = resetCSS( elem, {
  13. display: '',
  14. visibility: 'hidden',
  15. position: 'absolute'
  16. });
  17.  
  18. // Figure out what the full height of the element is, using clientHeight
  19. // and if that doesn’t work, use getHeight
  20. var h = elem.clientHeight || getHeight( elem );
  21.  
  22. // Finally, restore the CSS properties back to what they were
  23. restoreCSS( elem, old );
  24.  
  25. // and return the full height of the element
  26. return h;
  27. }
  28.  
  29. // Find the full, possible, width of an element (not the actual,
  30. // current, width)
  31. function fullWidth( elem ) {
  32. // If the element is being displayed, then offsetWidth
  33. // should do the trick, barring that, getWidth() will work
  34. if ( getStyle( elem, 'display' ) != 'none' )
  35. return elem.offsetWidth || getWidth( elem );
  36.  
  37. // Otherwise, we have to deal with an element with a display
  38. // of none, so we need to reset its CSS properties to get a more
  39. // accurate reading
  40. var old = resetCSS( elem, {
  41. display: '',
  42. visibility: 'hidden',
  43. position: 'absolute'
  44. });
  45.  
  46. // Figure out what the full width of the element is, using clientWidth
  47. // and if that doesn’t work, use getWidth
  48. var w = elem.clientWidth || getWidth( elem );
  49.  
  50. // Finally, restore the CSS properties back to what they were
  51. restoreCSS( elem, old );
  52.  
  53. // and return the full width of the element
  54. return w;
  55. }
  56.  
  57. // A function used for setting a set of CSS properties, which
  58. // can then be restored back again later
  59. function resetCSS( elem, prop ) {
  60. var old = {};
  61.  
  62. // Go through each of the properties
  63. for ( var i in prop ) {
  64. // Remember the old property value
  65. old[ i ] = elem.style[ i ];
  66.  
  67. // And set the new value
  68. elem.style[ i ] = prop[i];
  69. }
  70.  
  71. // Retun the set of changed values, to be used by restoreCSS
  72. return old;
  73. }
  74.  
  75. // A function for restoring the side effects of the resetCSS function
  76. function restoreCSS( elem, prop ) {
  77. // Reset all the properties back to their original values
  78. for ( var i in prop )
  79. elem.style[ i ] = prop[ i ];
  80. }

Report this snippet  

You need to login to post a comment.