0

I have been working on this for days now. Looking through countless articles and trying a lot of different ideas that I have had.

All I am looking to do is have a background image or element that is 100% of the browser height. The problem is that whenever the address bar shows and hides the available space changes and the picture resizes causing an annoying jump.

I am using a full screen image slider called maximage 2 (http://www.aaronvanderzwan.com/maximage/)

First I tried to make the html or body containers aligned to the top and 120% high so that when the address bar goes away it will still cover. But the image still resizes as 120% of the new size is still different.

I have also been trying to store the original browser height and then adding to that number to compensate for the address bar and resizing the slider to the new size.

I was thinking in the way of using device aspect ratios and taking into account something that stays fixed such as the width, but this would vary from device to device and not be reliable.

Does anyone know of any simple and clean ways to simply cover the background of a mobile device with an image slider without using a percentage that will resize?

Pang
  • 9,564
  • 146
  • 81
  • 122
martyish
  • 31
  • 10
  • Sorry - I'm having a hard time understanding. You don't want it to resize when the address bar goes away? Or you don't want it to "jump" when the address bar condenses itself. Because thats just the css doing what you're telling to do and filling the space. – ajmajmajma Apr 15 '15 at 14:55
  • I need a way of having an image cover the device viewpoint (100% width and height) but can not use percentages. @ajmajmajma – martyish Apr 15 '15 at 15:58
  • That doesn't really answer my question :). Might I suggest posting a fiddle of the problem and/or what you tried. Your site link is pretty slow. It's really hard to say without actually seeing the problem or looking at the code. There are tons of solutions it just depends exactly what you're looking to do. You don't want to get into storing browser sizes window sizes that gets ugly incredibly fast, and pretty damn bad for performance too. – ajmajmajma Apr 15 '15 at 17:53
  • Based off what you are looking for I would check this out - http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems/15717609#15717609 – ajmajmajma Apr 15 '15 at 17:57
  • Yeah.. thats the same problem.. No real solutions to it with out using js and guessing the address bar heights.. I was must looking to see if anyone had any actual solutions to the problem @ajmajmajma – martyish Apr 16 '15 at 14:44

1 Answers1

0

I had the same problem. The solution was to set the background hight to window height via jQuery and block the resize event while the scroll event is active.

That way you can scroll let the address bar disappear and have no nasty resize jump happen.

https://stackoverflow.com/a/31546432/1612318

Community
  • 1
  • 1
Rotareti
  • 49,483
  • 23
  • 112
  • 108