We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

mifly on 03/13/08


Tagged

javascript


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

jamesming


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.