I am trying to load a div and position it absolutely in a mobile safari - I think it's something like a warning window.
I tried using an absolutely positioned div with top set to 50% and half height / width:
#overlay-message {
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: -67px 0 0 -110px;
width: 220px;
height: 125px;
}
but, as I understand it, the viewing area will be different from the fixed position on the page, and the item is displayed at the offset position when the browser scrolls down. I thought I could try moving the position using javascript based on the value window.pageYOffset, but unfortunately it shows 0 whether chrome is displayed or not.
My last thought was to calculate the height of the Chrome browser using window.outerHeight-window.innerHeightand then move the div based on this value, but unfortunately this does not work.
(w/jquery):
$(window).load(function() {
chrome_height = window.outerHeight - window.innerHeight;
alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight);
});
, , , window.innerHeight window.outerHeight - 306 ( Safari-) - .
- ?
!
-simon