I have an issue when using Internet Explorer 10 on a Windows 8 tablet in Metro mode. When visible the keyboard overlaps a part of the browser its content. In order to provide a good user experience I need to resize that content. And to do that I need the remaining height of the browser. Can someone point me in the right direction how to get the height of the virtual keyboard?
There is no way to get height of virtual keyboard in browser, but on IE 10 metro mode, you can use onresize event to get the available height (window.innerHeight) after the virtual keyboard is visible.
You can use the old height (when keyboard is non-visible) - new height (when keyboard is visible) to get the virtual keyboard height if you really need this.
remember, onresize event will not be fired if IE is in desktop mode when virtual keyboard is displayed.
Related
The question
When window.onresize event is fired, the bottom menu should become hidden if window.innerHeight is smaller than it was at window.onload.
Will this behave consistently across mobile browsers and operational systems?
Rationale
This is the solution I found to deal with the fact that mobile keyboards resize the viewport when they come out. If the bottom menu is not hidden when the keyboard comes into view, it will get stacked upon the keyboard.
This solution works as expected on Chrome v80 running on Android 7.1.
I wonder, however, if the below cases are common, since they would brake the mechanism:
Browsers that won't trigger the resize event when the keyboard comes in and/or leaves
Systems/browsers that keep the keyboard visible while navigating to a new page, therefore making the initial window.innerHeight value different from the actual viewport size without keyboard
Important: Doing the toggling through Input focus/blur events is out of question. I've found that on my Android phone, when the System's go-back button is pressed, the keyboard hides, but the input does not lose focus, therefore the bottom menu stays hidden.
I'm trying to set the size of a background image to match the screen size upon window resize. The problem is that width and height don't alternate their values when I change the mobile orientation. When I test it in the dev tools of a desktop browser it works, however when testing in several mobile browsers, although the orientation does get changed, the measures don't.
This is the basic js:
$(function() {
function resizeBackground() {
$('#background-image').height(screen.height);
}
resizeBackground();
$(window).resize(resizeBackground);
});
Unfortunately due to a weird vh bug on iOS I'm forced to use JS. The issue here is that the background image jumps when the browser address bar of some browsers, specially Chrome and Firefox, gets hidden. It's detailed here: stackoverflow.com/questions/24944925/.
Summarizing my comments I want to describe why your solution doesn't work:
window.screen.height and window.screen.width get you the device's actual height and width and these values don't change on page resize or orientation change.
For the viewport sizes (you actually need viewport) the appropriate methods (variables) are window.outerWidth and window.outerHeight (in some cases window.innerWidth and window.innerHeight will work also).
For getting actual document size (html document), use document.documentElement.clientWidth and document.documentElement.clientHeight.
For detecting orientation change I would suggest orientationchange event instead of onresize event, because onresize also fires when keyboard is shown for example.
Those mobile browsers should support the more specific orientationchange event. Perhaps they're only firing that one and not resize. Try handling orientationchange too.
window.addEventListener('orientationchange', resizeBackground);
For Mobile Safari you can check window.orientation and if it is 90/-90, choose smaller of width/height for your "height". When orientation is 0, then choose higher value. I have now observed that when opening Mobile Safari directly in landscape, the values are swapped and do not swap on orientation change. As window.orientation is deprecated, it should only be used for Mobile Safari. FOr the rest, we use window.screen.orientation.angle.
I recently purchased an ASUS c100p Chromebook and noticed that when the device is flipped all the way back into "tablet" mode that sizable windows are maximized by default. If they have fixed window bounds they are effectively treated as modal (centered, immovable, and peripheral areas are dimmed) when in the foreground, unless they are set to have the alwaysOnTop attribute in which case they can be moved freely. I want to be able to detect this change so I can have an app with fixed window bounds perform some sort of action (maximize, close, set to alwaysOnTop, etc.). Is there a some way of detecting this transition in Javascript?
I've tried the following events with no success:
chrome.app.window.onFullscreened - Nothing fires on transition.
chrome.app.window.onMaximized - Fires on resizable windows, but not windows with fixed bounds.
chrome.system.display.onDisplayChanged - Fires if device is rotated from landscape to portrait while transitioning, but not if going straight to landscape tablet mode.
You could detect to see if the inner width and height of the window is the same as the fixed bounds with this code:
if(window.innerWidth != 400 || window.innerHeight != 400) {
// some code, eg window.close()
}
Replace the 400s with the width and height the window is being opened with.
In my webpage I have a text input field which gets covered by the keyboard in Windows 8.1 tablet.
I want the tablet to 'push up' the web page content (as it works on the iPad).
So:
Is it possible to make the keyboard NOT covering my input field?
And can I detect if a virtual keyboard is active with javascript?
You could get the relative position of the text field in comparison to the screen resolution and if the field lays on the 2nd vertical half (i.e. the space that covers the keyboard after appearing), scroll down the webpage for a fixed amount of pixels.
If you use jQuery, you could use the jquery.scrollTo plugin to scroll to the field with a vertical negative offset, so the field is always visible.
Plugin site: https://github.com/flesler/jquery.scrollTo
Hope this helps!
I have no Windows tablet to be sure of how the OS manages the keyboard pop-up, but this method has worked for me on Android and iOS.
I have a variable height div fixed div that can change height on orientation change, so ideally I wanted to change the CSS by javascript. However on IE10 Metro using the Surface I can't find any JS event that deals with this? iOS and Chrome both handle it fine.
I have tried onorientationchange and onresize to no avail...
IE 10 doesn’t support Device Orientation Events[0], unfortunately. They do have a prototype[1], but this wont help for browsers that have already been released.
Depending on what you want to do, you may be able to use the orientation Media feature[2] to set a different CSS height value when in portrait or landscape. This is supported by IE[3]
[0] http://caniuse.com/#feat=deviceorientation
[1] http://blogs.msdn.com/b/ie/archive/2012/08/30/exploring-device-orientation-and-motion.aspx
[2] http://www.w3.org/TR/css3-mediaqueries/#orientation
[3] http://msdn.microsoft.com/en-us/library/ie/hh772710(v=vs.85).aspx