I am using Phonegap with JQuery-mobile, Phonegap on iOS. I encounter this problem with header jump to the middle when leaving form input.
I already set data-hide-during-focus="true" on both fixed header and footer. This problem is killing me.
If we have only one header bar then we can follow the code only for the main-headerbar.
$(document).on('focus', 'select, input, textarea', function () {
$('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
});
$(document).on('blur', 'select, input, textarea', function () {
$('#main-headerbar').css({ 'position': 'fixed' });
});
If we have two header bars and Second-headerbar will be shown underneath the Main-headerbar (If main-headerbar’s height is ’47px’ then set top style for the second-headerbar, top : 47px).
$(document).on('focus', 'select, input, textarea', function () {
$('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
$('#Second-headerbar').css({ 'position': 'absolute', 'top' : '0px' });
});
$(document).on('blur', 'select, input, textarea', function () {
$('#main-headerbar').css({ 'position': 'fixed' });
$('#Second-headerbar').css({ 'position': 'fixed', 'top': '47px' });
});
OR follow iOS fix for position fixed elements on input
I had the similiar problem i was using 1.0.1 and the major issue was arising in of header jumps was in older 2.3 version of android and even in Google Nexus phone. I have searched internet for more and more than after some R&D i realize it was basically mistake of css Below what i have done to solve it
Give your header class “.header” of each page
Create css class with following code
.header{ border: 0px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 21; }
Besides if you are facing any issues where the header jumps down after changing the page then add this code
$.mobile.silentScroll(0); in $("#yournextpageid").live("pageshow", function() { $.mobile.silentScroll(0); }
What Jquery data-position="fixed" does is it dynamically adds top position to its header and it has overhead and proves to be very sticky in some devices. Besides it jumps in certain devices on opening the keyboard. Adding above CSS will solve your problems.
in Config.xml change the line to false it will solve your problem..
Related
After we upgraded my iPhone to IOS11, I started seeing a cursor in a random position in my login window. This also happens on Chrome / IOS11. The position of the cursor is marked red on screenshots below.
Try adding position: fixed to the body of the page.
Piggybacking off of ybentz's answer. If you use the bootstrap modal, you can add this to your main.js file:
var savedScrollPosition;
$(document).on('show.bs.modal', '.modal', function() {
savedScrollPosition = $(window).scrollTop();
});
$(document).on('hidden.bs.modal', '.modal', function() {
window.scrollTo(0, savedScrollPosition);
});
And then this to your css because you'll already have the modal-open class being added anytime the modal pops:
body.modal-open {
position: fixed;
width: 100%;
}
Thanks for the help ybentz!! I would've responded to your comment, but I don't have the reputation to do so yet.
Ignacios Answer solved the Problem for me.
If i show an overlayer/modal i add the class fixed to the body.
Also add to css this rule:
body.fixed{
position: fixed;
}
I had the same problem and the position: fixed solution on the body does solve it so that's great. One thing to note though is that adding the class to the body causes the browser to "jump" to the top of the page so when you remove it when the popup/modal is closed it might be confusing for the user.
If your popup/modal is full screen on iOS what you can do to fix it is save the scroll position before adding the position: fixed class with something like this (using jQuery but can be done easily with vanilla js):
var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')
and then restore it on popup close like this:
$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)
and your css will be
body.has-fullscreen-modal {
position: fixed;
}
Hope that helps!
Personally, position: fixed scroll to top automatically. Quite annoying !
To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.
**VERSION 1 - All modals fix**
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
});
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
**VERSION 2 - Selected modals only**
I modified the function to fire only for selected modals with a class .inputModal
Only the modals with inputs should be impacted to avoid the scroll to top.
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
(function iOS_CaretBug() {
var ua = navigator.userAgent,
scrollTopPosition,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
$(document.body).on('show.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Get scroll position before moving top
scrollTopPosition = $(document).scrollTop();
// Add CSS to body "position: fixed"
$("body").addClass("iosBugFixCaret");
}
});
$(document.body).on('hide.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Remove CSS to body "position: fixed"
$("body").removeClass("iosBugFixCaret");
//Go back to initial position in document
$(document).scrollTop(scrollTopPosition);
}
});
}
})();
});
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
For the HTML
Add the class inputModal to the modal
<div class="modal fade inputModal" tabindex="-1" role="dialog">
...
</div>
Nota bene
The javascript function is now self-invoking
REF : iOS 11 Safari bootstrap modal text area outside of cursor
I have fixed this issue with this CSS
#media(max-width:767px) {
body {
position:fixed !important;
overflow:auto !important;
height:100% !important;
}
}
See this JSFiddle for example: http://jsfiddle.net/6ocawwqd/21/
Stack Overflow is insisting I include the code that I'm linking to, so here is the JS and CSS:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').removeClass('hide');
setTimeout(function() {
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
transition: all .5s;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
The Basic Problem:
I have a widget that I need to hide/show which has an unknown height. When hidden, the display must be set to 'none' to avoid tab index and form validation issues. So I'm using max-height property to make use of CSS transitions to animate the hiding and showing, and to swap the display from 'none' to 'block' (or just to the default by removing the display property from the element. The issue described happens in either case).
In my testing, I get a double animation only in OSX Safari, Chrome and Safari on iOS, and Android Stock mobile browser. (It works in Windows Chrome, FF, IE11, Android Chrome)
I've pinpointed when the double animation happens.
The first animation is correct, and happens when the max-height property is changed via JavaScript from 0 to whatever the content height is.
The second animation occurs when I then use a timer to remove the max-height property after the animation is complete. I must remove the max height, because after visible, the element may get even more items added to it and so must be allowed to grow.
Has anyone encountered this or have a solution?
I've encountered a similar issue, but found that a lot of the backface-visibility: hidden suggestions haven't resolved it for iOS.
As you're already using JavaScript to set/unset the height properties, you can try to toggle an additional 'animating' class to the element before animating and after the animation's complete. If you do this prior to removing the height (or setting it back to 'auto'), iOS won't be trying to re-animate the height property that results in the flicker.
Taking your example http://jsfiddle.net/m2adrugn/2/:
$(document).on('click', '.show', function () {
$('.reveal')[0].style.removeProperty('display');
var height = $('.reveal')[0].scrollHeight;
$('.reveal').css({ 'max-height': height, 'overflow':'hidden' });
$('.reveal').addClass('animating').removeClass('hide');
setTimeout(function() {
$('.reveal').removeClass('animating');
$('.reveal')[0].style.removeProperty('overflow');
$('.reveal')[0].style.removeProperty('max-height');
}, 501);
});
$(document).on('click', '.hide', function () {
var height = $('.reveal')[0].scrollHeight;
$('.reveal').addClass('animating').css({'max-height': height, 'overflow':'hidden' });
setTimeout(function() {
$('.reveal').addClass('hide');
}, 5);
setTimeout(function() {
$('.reveal').css('display', 'none').removeClass('animating');
}, 505);
});
CSS
a {
color:blue;
cursor:pointer;
}
.reveal {
width:250px;
background-color:#ccc;
padding:10px;
overflow:hidden;
translate3d(0,.01%,0);
}
.reveal.animating {
transition: all .5s;
}
.reveal.hide {
max-height:0 !important;
padding-top:0;
padding-bottom:0;
}
Change max-height to height.
Worked for me.
jsFiddle links are at the bottom.
I have a Phonegap app that I have created with jQuery Mobile. The page transitions were really choppy and inconsistent in the native iOS app until I found this solution. It made my scrolling not so great, so I made a few changes per this follow-up article.
After the first solution and still after I implemented the second solution, the following code stopped working for me in my app:
$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);
The above code scrolls the user down the page over 2.5 seconds to the DIV with the ID of specificID.
I have tried multiple things, but nothing seems to work:
$('#container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('html, body, #container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('.scrollable').animate({scrollTop: $('#specificID').offset().top}, 2500);
$(".scrollable").animate({ scrollTop: $("#specificID").scrollTop() }, 2500);
So, here is how I adjusted my jquery mobile code to fix the page transitions:
1. I wrapped [data-role="page"] DIV with container DIV
<body>
<div id="container">
<div data-role="page">
2. I added the following Javascript
$(document).one('mobileinit', function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
3. I added the following CSS
body {
margin: 0;
}
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
div[data-role="header"] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div[data-role="content"] {
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
}
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
-webkit-transform: translateZ(0px);
}
I setup three jsFiddles to show this:
Plain jQuery - scrollTop working: http://jsfiddle.net/pxJcD/1/
Transition Fix - scrollTop NOT working: http://jsfiddle.net/ytqke/3/
Transition Fix w/ Native Scrolling - scrollTop NOT working: http://jsfiddle.net/nrxMj/2/
The last jsFiddle is the solution that I am using and the one that I need to work. I provided the second one to show that the scrollTop functionality stopped before any of the native scrolling changes I made. Any thoughts on what I can do to be able to scroll down the page using javascript?
I’m using jQuery 1.8.2, jQuery Mobile 1.2.0, and Phonegap 2.2.0 (via Build).
Thank you for any help you can offer.
In your CSS, you have set your container's position property to Absolute.
Remove your div#container
It should work.
http://jsfiddle.net/nrxMj/16/
I have a simple footer that I want fixed to the bottom of the browser. I want to be able to resize it vertically only. The problem I have is that once I apply jQuery UI Re-sizable it sets the position to relative which obviously messes up the original intent of the layout.
Below is a simple example using JSBin of my problem.
http://jsbin.com/ubuhic/
Thoughts?
$(function () {
$('footer').resizable({
handles: 'n, s'
}).bind('resize', function(){
$(this).css("top", "auto");
});
});
This code works perfectly for me. http://jsbin.com/ubuhic/11
footer
{
height: 200px;
bottom: 0px;
position: fixed !important;
width: 100%;
background-color: #cc0000;
}
!important should do the trick...
I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.
I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.
I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.
Here is an example of the grayed-out effect with a dialog box:
jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.
All suggestions, website referrals, and code is appreciated.
EDIT: I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.
EDIT: What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/
I always like to use the jQuery BlockUI plugin:
http://malsup.com/jquery/block/
Check out the demos, you'll probably find something you're looking for there.
One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.
When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).
Code:
#json-overlay {
background-color: #333;
opacity: 0.8;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('ajax-loader.gif');
background-position: center;
background-repeat: no-repeat;
}
Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div
Why don't you just use "modal:true"?
$(function () {
$("#dialog").dialog($.extend({}, dialogOptions, {
autoOpen: false,
width: 500,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
}));
$("#profile_edit").click(function () {
$("#dialog").dialog("open");
});
$("#save_and_close").click(function () {
$("#dialog").dialog("close");
});
});
You can use something like this jquery code. Pass the id of the element that you want to stay on top of the page:
function startModal(id) {
$("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
$("#PopupMask").css('opacity', 0.5);
$("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
$("#"+id).data('savePosition', $("#"+id).css( "position"));
$("#"+id).css( "z-index" , 11 );
$("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
if ($("#PopupMask") == null) return;
$("#PopupMask").remove();
$("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
$("#"+id).css( "position" , $("#"+id).data('savePosition') );
}
you can use simple div and then ajaxstart and ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});