2

I am using a jQuery script to place an element a given distance from the bottom of the screen. (Yes, JavaScript is necessary to get the dynamic, intended behavior on this page.)

For most browsers, the element, which is represented by the grey bar at bottom of the image below, this code will place the element just fine:

var container = $('section.explore');
var winHeight = $(window).height();

container.css('margin-top', winHeight - container.height());

However, on Android browsers, I get this behavior (note the grey bar at the bottom):

enter image description here

In order to the get the search bar a certain distance from the bottom of the window, I have to scroll the entire way up so that the address bar is visible, then the bar is properly positioned.

Is there a way that I can better measure the window height so that the user doesn't have to view the address bar to see the element in its proper position?

Thank you for your time.

Oliver Spryn
  • 16,871
  • 33
  • 101
  • 195

1 Answers1

0

Try checking for accurate values in 

window.innerHeight or window.outerHeight

Also check for accurate values in the resize event on window.

$(window).bind('resize', function () {
   console.log(window.innerHeight);
   console.log(window.outerHeight);
});

I think the resize event should fire each time the browser address bar appears and disappears.

Parthik Gosar
  • 10,998
  • 3
  • 24
  • 16