How do I get the height of the mobile safari chrome?

Hi All-

I'm trying to load a div and position it absolutely in mobile safari - think something like the alert box.

I tried to use an absolutely positioned div with top set to 50% with a margin half the height/width:

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width: 220px;
  height: 125px;
}

but as I realized, the viewport is going to be different than the fixed position on the page, and the element is displayed in an offset position when the browser is scrolled down. I thought I could try to move the position using javascript based on the window.pageYOffset value, but unfortunately this shows 0 whether the chrome is shown or not.

My last thought was to calculate the browser chrome height using window.outerHeight-window.innerHeight and then move the div based on this value, but unfortunately this is not working.

I've tried (w/ jquery):

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

But what I'm finding is that window.innerHeight and window.outerHeight are both the same - 306 (I've got the safari developer chrome on) - so this doesn't appear to work.

Can anyone point me in the right direction on this?

thanks!

-simon

ansaurus

tags:

views:

answers:

How do I get the height of the mobile safari chrome?

related questions