I'm trying to create a div that fills the entire viewport's width and height on a mobile device. The problem is, Mobile Safari and Android Browser have a navigation menu that disappears once the user begins interacting with the page. The navigation bar makes the viewport height smaller, but when it goes away, I can find no javascript event that I can listen to so I can get updated values for the viewport height and width.
Is there a JavaScript event that is fired when Mobile Safari's navigation menu retracts from view? I was hoping there was an event I could listen to instead of firing a timer every x milliseconds to check the viewport height.
Here is a chart that explains the terminology when I say "navigation bar"
Since the visible area is changed window.onresize should fire. Try:
window.onresize = function(event) { /* your stuff */ };
Related
I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow
Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));
When viewing a web page on my mobile phone (Android default browser), there is an address bar at the top and a navigation bar at the bottom. These bars dissapear if I start to scroll down a but appear the moment I scroll back up to the top. Other browsers have similar operations and each bar has their own sizing and behavior.
I need to be able to get the height of the view-able part of my website (ie, the part between the 2 bars). When the bars retract or hide, I need to be able to detect the new height.
How can this be done?
if you are using jQuery you can get height of viewable part using
$(window).height()
and if you are using javascript you can get height by following code
window.innerHeight
I have tested this code with device Moto X.
I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just comes out of the full screen view and triggers browser options.
1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)
2.This is the second image where we can see upon clicking "what is twitter" we get this view
Is there any possible way we could over ride that tap?
I think I may have found an answer, but can't confirm when switching between Portrait and Landscape. Setting your content to have the following styles:
height: 100% (allows content to fill the viewport and go beyond the bottom)
overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!
If I understand your question right, your link is on the bottom of your page.
You have to add some space to the bottom of the page (the height of the safari icon bar).
Though this helps only if the user scrolls all the way down to the bottom.
The non-clickable Area is relative to the browser viewport, not to the page height. So when a button (or something else) is inside that area where the toolbar appears, you can't click it on first try.
I'm developing a website for smartphone and I'm having some issues with the top safari bar. I would like to always display it in portrait and landscape.
On a page, I do have a link animation. When I'm clicking on it, the browser is removing the top bar. Is there a way to let the top bar during the animation?
Thanks
Safari automatically slides the browser top bar up on iPhones and iPod touches asoon as the page is scrolled, even by a single pixel.
The only way to get around this would to have a div that fills the screen with css property overflow:hidden but you would have to control movement of the content.
I have a web app that I want to exactly vertically fill the browser viewport, including pushing the address bar up past the top.
Is there some way of getting the browser viewport size without the address bar? Currently, I am using jQuery like:
$("#mainBox").height($(window).height)
but this will fill the viewport minus the address bar, causing the element to be too narrow when viewed in landscape.
For iPhone, I was getting around this by hard-coding the iPhone browser viewport sizes into the page, but there are obvious problems with that.
You need to reset the height in an oerintationchange event. So is you create an orientationchange event handler for the window you need to call the same line inside that handler and you will get the new window height and you should be good.