How do i calculate the height of toolbars, address bars and other navigation tools in pixels?

Question

Hi,

Basically i need to know how many pixels the y axis is from the top left of the screen until i reach the actual web window. Does anyone have any ideas...?

Answer 1

Unfortunately, I don't think there's a way to do this in all browsers at the minute. Chrome, Firefox, Safari and Opera all support window.innerHeight and window.outerHeight, so in those browsers, assuming you're not executing the code from within a frame, it's a case of:

var chromeH = window.innerHeight - window.outerHeight;

That leaves (you guessed it) Internet Explorer, which doesn't support either of those properties. It's not even in IE9 PP3. To be fair to IE, they're not defined in the DOM spec Screw the fairness, they're defined in the w3c CSSOM working draft. There is a "solution"¹ that involves resizing the window and resizing back again, but it causes the window to flicker and it will not work with a tabbed window.

^{1 (scroll to the second example)}

Answer 2

I don't know how you can return the height of external component, but I took this from http://www.alexandre-gomes.com/?p=115 and adapted it to also return scroll bar height. It seems to work in FF and Chrome. If anyone can test it in other browsers and give me feedback, I will modify this answer accordingly.

Using JQuery :

jQuery.getScrollBarSize = function() {
   var inner = $('<p></p>').css({
      'width':'100%',
      'height':'100%'
   });
   var outer = $('<div></div>').css({
      'position':'absolute',
      'width':'100px',
      'height':'100px',
      'top':'0',
      'left':'0',
      'visibility':'hidden',
      'overflow':'hidden'
   }).append(inner);

   $(document.body).append(outer);

   var w1 = inner.width(), h1 = inner.height();
   outer.css('overflow','scroll');
   var w2 = inner.width(), h2 = inner.height();
   if (w1 == w2 && outer[0].clientWidth) {
      w2 = outer[0].clientWidth;
   }
   if (h1 == h2 && outer[0].clientHeight) {
      h2 = outer[0].clientHeight;
   }

   outer.detach();

   return [(w1 - w2),(h1 - h2)];
};

alert( $.getScrollBarSize() ); // in Chrome = [15,15] in FF = [16,16]

Without JQuery

function getScrollBarSize () {  
   var inner = document.createElement('p');  
   inner.style.width = "100%";  
   inner.style.height = "100%";  

   var outer = document.createElement('div');  
   outer.style.position = "absolute";  
   outer.style.top = "0px";  
   outer.style.left = "0px";  
   outer.style.visibility = "hidden";  
   outer.style.width = "100px";  
   outer.style.height = "100px";  
   outer.style.overflow = "hidden";  
   outer.appendChild (inner);  

   document.body.appendChild (outer);  

   var w1 = inner.offsetWidth;  
   var h1 = inner.offsetHeight;
   outer.style.overflow = 'scroll';  
   var w2 = inner.offsetWidth;  
   var h2 = inner.offsetHeight;
   if (w1 == w2) w2 = outer.clientWidth;
   if (h1 == h2) h2 = outer.clientHeight;   

   document.body.removeChild (outer);  

   return [(w1 - w2),(h1 - h2)];  
};