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.
Related
I'm having trouble with sizing a page. I'm resizing an image based on the height of the page. I don't want any scrolling on the page however on mobile devices the address bar is interfering. Sometimes the page gets the height without the address bar and puts in scroll bars other times it gets the height with the address bar and runs fine
Is there a way I can get the height of the page with the address bar? Or force it to show? (or force it to hide?)
Actually I had your problem, there are 2 ways to solve it, but they can't help you anywhere, on every browsers!!
WAY 1 :
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
WAY 2:
Using scroll and resize event on your window object to set height as same as your viewport anytime.
I have a Web App which looks good but it is not fitting to the browser width and shows scroll bar at bottom to scroll. I tried this code to make it work, it only puts the app at centre of screen but it doesn't fit to browser's width:
var app = UiApp.createApplication().setTitle('Application 2015').setStyleAttribute('left', '26%').setStyleAttribute('position','relative');
I also tried adding .setWidth(100) at last of above code, still it doesn't make Web App fit to browser's width.
My Web App needs to show application form in the centre and same white blank space on left and right side of the app.
Any idea on this one?
Thanks
To make the app width same as the browser width, you should set the width to "100%" instead of "100".
Also, if you want to center your content in the browser, set the width to a fixed width, like "1000px" or "60%", and set the margin to "0 auto", which means let the browser decide the left and right margin of the content. The content should be centered then.
var app = UiApp.createApplication().setTitle('Application 2015');
app
.setStyleAttribute('width', '90%') // 90% of browser window width
.setStyleAttribute('margin','10px auto'); // 10px top and bottom margins, centered horizontally in browser window
Most standard CSS styles are supported by UI Service's .setStyleAttribute() method (on the UiInstance and its widgets). Setting width as % will resize your ui app with browser window resizing. But it will only go as narrow as your widest widget - after that you will see horizontal scrollbars appear.
However, styles-wise, UiApp will only get you so far. If you need a lot more control over the look of your app, build it using HTML Service.
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 */ };
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.