Artikelen

Viewport size met JavaScript

Gepost door joost op 29 mrt 2010 in de categorie HTML
Soms wil je de afmetingen van de viewport (browser afmetingen) opvragen via Javascript. Hier vind je een functie (en implementatie) van een functie die de Viewport Size opvraagt. Het is heel simpel, kijk maar...

De eerste functie die je in de head zet...

  1. function getViewportSize() {
  2. var viewportwidth;
  3. var viewportheight;
  4. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  5. if (typeof window.innerWidth != 'undefined') {
  6. viewportwidth = window.innerWidth,
  7. viewportheight = window.innerHeight
  8. }
  9. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  10. else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
  11. viewportwidth = document.documentElement.clientWidth,
  12. viewportheight = document.documentElement.clientHeight
  13. }
  14. // older versions of IE
  15. else {
  16. viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
  17. viewportheight = document.getElementsByTagName('body')[0].clientHeight
  18. }
  19. return [viewportwidth, viewportheight];
  20. }

en de tweede functie in de head...

  1. function doResize() {
  2. viewportSize = getViewportSize();
  3. viewportWidth = viewportSize[0];
  4. viewportHeight = viewportSize[1];
  5. document.getElementById('id').style.width = (0.9 * viewportWidth - 200)+'px';
  6. }

en natuurlijk een stukje code voor in de body tag...

  1. <body onload="doResize()">

of als je continu wil checken of de breedte nog wel ok is, dan kun je ook een 'onresize' toevoegen...

  1. <body onload="doResize()" onResize="doResize()">

Succes!





Terug