Browser Display

In Category Useful Functions
Article published 28/02/2011 08:17:04pm
Browser DisplayBrowser Display

A simple cross-browser function to return the information needed to determine the currently displayed area of the webpage by returning the current scroll-offset as well as the width and height of the browser display area.

In many cases with dynamic page content it may be necessary to determine which part of a webpage is currently being viewed. For example; you may wish to resize an image to make best use of the available area whilst still being completely visible without the visitor needing to scroll or zoom the page.
This function is designed to allow you to determine the scroll offset (scrollTop and scrollLeft) as well as the current width and height of the visible portion of the webpage by fetching either the windows innerWidth and innerHeight properties, or the bodys offsetWidth and offsetHeight depending on the browser in use.
function GetViewArea() {
  scr = new Array();
  scr['x'] = document.body.scrollLeft; scr['y'] = document.body.scrollTop;
  if(window.innerWidth) {
    scr['w'] = window.innerWidth; scr['h'] = window.innerHeight;
  } else {
    scr['w'] = document.body.offsetWidth; scr['h'] = document.body.offsetHeight;
  return scr;

This function has been tested in recent versions of the following browsers: Internet Explorer, Firefox, Google Chrome, Safari and Opera.