I'm trying to get the height of the Nexus tablet using $(window).height(); but I'm having troubles as it seems to add the height of the URL bar to the result, which disappears when the user is scrolling.
My page has different sections and each one should look like a full screen page.
The first page looks good until I start scrolling down, as the URL bar disappears and the visible area increases.
I've tried (without success) to hide the URL bar using the techniques explained in this post, but I can't control it.
Is there any way to deal with this problem?
Thanks.
I came with the conclusion that the best option is to avoid the hiding of the URL bar for the Nexus.
This way the calculated size will always fill the screen even on scrolling.
In order to do so I disabled the scrolling on the html and body elements and used and auto scrolling which scrolls from one to the next section using jQuery.
Related
I have a situation where disabling scroll on mobile when my cart is turned on causes really weird graphical issue with android firefox toolbar. Cart is a fixed container taking an entire screen.
When toolbar is shown it just stays there and freezes (probably because i just turned off scrolling) but when its hidden and I'll turn on my cart white bar shows up in place of the toolbar picture related, as you can see it's obscuring my buttons as well. I found workaround for that where I make custom --vh unit based on actual screen height.
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
I disable scroll by ading this on body
overflow-y:hidden;
I was also trying to disable it with different tricks like setting position to fixed or relative but it causes the same bug.
This only happens on firefox android.
Is there a way I can turn off scrolling without causing this, or maybe someone knows how to fix displaying 100vh height on mobile with pure css?
I am working on an Android app. When I slide the screen right I get a blank grey screen and when I slide the screen left I again get a blank screen with some of my content on it. I have attached pictures of the problem to better understand it.
I want to solve this problem via CSS if possible.
Second:
First:
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?
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
Is it possible to scroll out of the page bounds in a webview?
Example: Webview page/content width: 15px, screen size: 10px. Can I scroll to X position 8px?
Technically I can, and it worked fine on my test device. However, testing on other devices I notice that it will stop rendering when I move out of the bound. The left part of the page will be 'blurry' or not visible at all, till I scroll back left and there is no more "empty space" in the webview, than it will update.
Is there a solution for this?
A possible solution would be making the content larger on the fly, with white space. But I cannot add padding to the webview, unless I put it in the html BEFORE I render it. But before I render it I won't know the width. After I render it there is no way to change the padding/add some empty space to the content, without loading it completely again. Right?
I solved this by added 1-2 page-breaks at the end of the html, it will render fine now and I customly prefent the view from scrolling to the end of the page, so that the white is not shown to the user.
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/