Posted By

ShiftyP on 03/15/09


Tagged

width ie crossbrowser DOM internet explorer height viewport firerox windowinnerWidth windowinnerHeight documentdocumentElementclientHeight documentbodyclientHeight documentdocumentElementclientWidth documentbodyclientWidth


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Bolek
LeeRJohnson
jasonseney


Find Viewport Height / Width, crossbrowser:


 / Published in: JavaScript
 

A little bit of browser detection and some functions to get the viewport height and width, crossbrowser.

  1. browser : {
  2. IE : !!(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1),
  3. Opera : navigator.userAgent.indexOf('Opera') > -1,
  4. WebKit : navigator.userAgent.indexOf('AppleWebKit/') > -1,
  5. Gecko : navigator.userAgent.indexOf('Gecko') > -1
  6. && navigator.userAgent.indexOf('KHTML') === -1,
  7.  
  8. getViewHgt : function(){
  9. return browser.IE ?
  10. // IE Cases
  11. // Test for IE 5-7 Quirks and IE 4
  12. (!(document.documentElement.clientHeight)
  13. || (document.documentElement.clientHeight === 0)) ?
  14. // IE 5-7 Quirks and IE 4 case
  15. document.body.clientHeight :
  16. //IE 6+ Strict Case
  17. document.documentElement.clientHeight:
  18. // Gecko and Other DOM compliant case
  19. window.innerHeight;
  20. },
  21.  
  22. getViewWdth : function(){
  23. return browser.IE ?
  24. // IE Cases
  25. // Test for IE 5-7 Quirks and IE 4
  26. (!(document.documentElement.clientWidth)
  27. || (document.documentElement.clientWidth === 0)) ?
  28. // IE 5-7 Quirks and IE 4 case
  29. document.body.clientWidth :
  30. //IE 6+ Strict Case
  31. document.documentElement.clientWidth:
  32. // Gecko and Other DOM compliant case
  33. window.innerWidth;
  34. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: ShiftyP on March 15, 2009

More on cross browser window area: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Posted By: ShiftyP on March 15, 2009

More on cross browser window area: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Posted By: LeeRJohnson on March 18, 2009

More on cross browser window area

You need to login to post a comment.