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

Question

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

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.

Tested working in the following browsers :

• Chrome
• FF 9+
• IE9 (thank you Pax0r)
• Opera (thank you Pax0r)

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)];  
};

Answer 2

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 3

This is only script I've found, which is working in webkit browsers ... :)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

Minimized version:

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

And you have to call it when document is ready ... so

$(function(){ console.log($.scrollbarWidth()); });

Tested 2012-03-28 on Windows 7 in latest FF, Chrome, IE & Safari and 100% working.

source: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Answer 4

window.screenTop

Works in most major browsers except FF. For mobile webapps, this can be useful :-)

In FF, you can use: window.screenX

http://www.w3schools.com/jsref/prop_win_screenleft.asp