Screen, Browser, and Window Dimensions


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. //get current dimensions and positions of basic objects (screen, browser, viewport, window/frame)
  2. //optionally, specify a particular window/frame
  3. //usage: var dims = new WindowDimensions();
  4. function WindowDimensions(windowFrame)
  5. {
  6. windowFrame = windowFrame || window;
  7.  
  8. //****************************************************//
  9. //***** screen, browser, and viewport dimensions *****//
  10. //****************************************************//
  11.  
  12. this.screen = {
  13. width: screen.width,
  14. height: screen.height,
  15. //available screen dimensions; excludes taskbar, etc.
  16. availWidth: screen.availWidth,
  17. availHeight: screen.availHeight,
  18. colorDepth: screen.colorDepth
  19. };
  20. this.browser = {
  21. width: window.outerWidth, //undefined in IE, incorrect in Opera
  22. height: window.outerHeight, //undefined in IE, incorrect in Opera
  23. left: window.screenX, //undefined in IE, incorrect in Opera
  24. top: window.screenY //undefined in IE, incorrect in Opera
  25. };
  26. this.viewport = {
  27. outer: { //includes scroll bars
  28. width: window.top.innerWidth, //undefined in IE
  29. height: window.top.innerHeight //undefined in IE
  30. },
  31. inner: { //excludes scroll bars
  32. width: window.top.document.documentElement.clientWidth,
  33. height: window.top.document.documentElement.clientHeight
  34. }
  35. };
  36.  
  37. //***********************************//
  38. //***** window/frame dimensions *****//
  39. //***********************************//
  40.  
  41. var left, top;
  42.  
  43. //scroll position of document
  44. if(!isNaN(windowFrame.pageYOffset)) //all except IE
  45. {
  46. left = windowFrame.pageXOffset;
  47. top = windowFrame.pageYOffset;
  48. }
  49. else //IE
  50. {
  51. //IE quirks mode
  52. left = windowFrame.document.body.scrollLeft;
  53. top = windowFrame.document.body.scrollTop;
  54.  
  55. //IE standards compliance mode
  56. if(windowFrame.document.documentElement && windowFrame.document.documentElement.scrollTop)
  57. {
  58. left = windowFrame.document.documentElement.scrollLeft;
  59. top = windowFrame.document.documentElement.scrollTop;
  60. }
  61. }
  62. left = left || 0;
  63. top = top || 0;
  64.  
  65. this.window = this.frame = {
  66. outer: { //includes scroll bars
  67. width: windowFrame.innerWidth, //undefined in IE
  68. height: windowFrame.innerHeight //undefined in IE
  69. },
  70. inner: { //excludes scroll bars
  71. width: windowFrame.document.documentElement.clientWidth,
  72. height: windowFrame.document.documentElement.clientHeight //incorrect in quirks mode (equals offsetHeight)
  73. },
  74. scroll: {
  75. width: windowFrame.document.documentElement.scrollWidth,
  76. height: windowFrame.document.documentElement.scrollHeight,
  77. left: left,
  78. top: top
  79. }
  80. };
  81. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.