I'm not able to get exact height/width of the window on orientation change. And it is working fine when I'm using resizing.
It is working fine in JQuery previous versions but it causing an issue on JQuery latest version.
Some condition: I don't want to use this with timeout
$(window).on('orientationchange', function(){
alert($(window).height());
});
Related
I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
I have a Cordova (version 6.3.1) app. This issue only occurs on iOS version of the app (Android works fine). Every time i press on a text box to insert a text after doing some scrolling, it jumps straight back to the top. After some investigating, I found out that
DisallowOverscroll=true
in cordovas "config.xml" only works on the main screen of the app, not if I go and click on a "modal" "KompressionStromper" in the video (it does not work inside there), so how can I enable it inside there? So the behaviour is not like in video?
Please see video here on iOS 10.0.2 (during the first seconds i also try to pull at the main screen from top to bottom but there the "DisallowOverscroll" option works as expected).
Any other suggestions and help will be highly appreciated.
For the specific element you can disable overscroll with jQuery.
Like:
element.ontouchmove = (event) => {
event.preventDefault();
}
I strongly suggest that you also create a directive out of it, so it will be more done in a "angular way".
To fix the auto scaling issues to render my webpage on an iOS device, I've added the viewport meta tag,
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum- scale=1,user-scalable=no">
and I've added device specific styling through media queries for iPhone and iPad, This fixed the scaling issues on switching between portrait/landscape orientations.
The problem now is that when I shift focus to an input field(bringing the keyboard up) and shifting to landscape orientation with the keyboard on(auto scaling happens fine) and when I switch orientation back to portrait mode(with the keyboard still on), the UI gets distorted, i.e., some extra length gets added to the viewport width which either appears as black area or part of the same viewport being repeated again. And if I bring down the keyboard and switch orientations again, the added space gets removed and the UI gets back to normal again. This happens only with the keyboard on. I'm using mobile safari as my browser.
I've been working with Mobile Safari for years now, and one thing I've learned -- it's so buggy when it comes to orientation changes when an input has focus.
Saying that, here's a small script that might help you out.
window.addEventListener('orientationchange', function(){
document.body.style.paddingRight = '1px';
setTimeout(function(){
document.body.style.paddingRight = '';
}, 50);
}, true);
This basically forces the browser to reflow/re-calculate the layout, which should hopefully address the situation you're seeing.
Fiddle with an easy to reproduce bug: https://jsfiddle.net/LYn54
Fiddle with the fix: https://jsfiddle.net/gQR4m
Hope this helps!
I have a problem with jQuery Mobile 1.3.1 with an input file (accept="image/*;capture=camera") and iOS.
When I click on the button to select a file or to take a picture (choose take picture), then I switch the device in landscape mode to actually take the picture and switch to portrait to confirm. After that, the page is cut at the top. I have to switch the device orientation to solve de problem. I saw that the min-height is 20px smaller just after selecting the file.
Does anyone know how to solve this problem ?
Or can I force jQuery mobile to recalculate the page dimension after file selection ?
You can see the problem here : http://www.reestcompany.com/jqmtest/test.html
You have to add the site to the home screen to have the web app mode and see the problem.
Thanks for you help
You can use trigger page create to create the
$('#pagi-id').trigger('updatelayout');
As mentioned in the jqm docs
Example,
$(window).on( "orientationchange", function(event) {
$('#pagi-id').trigger('updatelayout');
});
I posted an issue on jQuery mobile Github, but it is not a problem from jQuery mobile, it is a problem from Apple. So I also reported the bug to Apple.
https://github.com/jquery/jquery-mobile/issues/6138#issuecomment-20572130
I am using jQuery mobile 1.1.0 and I am facing a problem that when I run the application in the browser it works fine but when I run this through 'Home screen icon' it starts flickering the pages.
I am using iphone 5.1.
Does anybody have a solution for this issue?
You need to update to jQM 1.1.1, screen flickering issues have been fixed in this version. This problem affected running jQM in UIWebView container like PhoneGap, but I assume it's similar when you save it on the home screen.
Try updating and see if it'll fix your problem.
Announcing jQuery Mobile 1.1.1
It's because of the page transitions. If you disable them globally for the time being, you'll fix your problem. It sucks to lose the transitions, but the white "flash" is far worse.
Here's the docs on disabling page transitions: http://jquerymobile.com/test/docs/api/globalconfig.html