i tried this code but still dos't work for me.
When the user clicks on an input field, the soft keyboard that pops up hides the input field when the latter is relatively low on the screen. The page is scrollable, so the user can scroll and see the field again, but the customer requirements define that the page will auto-scroll until the field is visible.
There is not simple way to solve this. I solved using a handler like this:
this.keyboardShowHandler = function (e) {
that.scroll.disable();
that.$el.css('bottom', (e.keyboardHeight - 30) + "px");
that.scroll.refresh();
that.scroll.scrollToElement(document.activeElement, 0, true, true);
};
this.keyboardHideHandler = function () {
setTimeout(function () {
if (!cordova.plugins.Keyboard.isVisible) {
that.$el.css('bottom', "0px");
that.scroll.scrollTo(0, -100, 0);
that.scroll.enable();
that.scroll.refresh();
}
}, 300);
};
window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
But I am using iscroll, jquery and cordova keyboard plugin. You might want to adapt to your frameworks
Related
I'm trying to handle a long list of <div>s and maintain scroll position in the list after navigating off and coming back. Essentially when a selection made is in the list I capture the listScrollPos and then try to reset it when I'm returning to the page (in Angular - so the list is re-rendered first).
vm.getAlbums = function() {
albumService.getAlbums()
.success(function (data) {
vm.albums = data;
$timeout(function () {
if (albumService.listScrollPos) {
$("#MainView").scrollTop(albumService.listScrollPos);
albumService.listScrollPos = 0;
}
}, 50); // delay required
})
.error(function(err) {
vm.error.error(err.message);
});
};
The process works fine in all browsers I tested - except on iOS in a WebView (Safari works fine). In other browsers the list displays and the scroll position is moved after the initial render. The pointer resets and all is good.
However, on iOS 8 either in Safari or a Web View in Cordova, the div turns white and shows 'empty'. If I touch the div anywhere it immediately displays at the correct scroll position.
IOW, the DOM appears to be updated and rendered, but the browser is somehow optimizing the scrolled content that was moved under program control.
Is there any way to force the browser to re-render the element after the scroll position was moved programmatically?
Ok, so after a bit more checking the problem is definitely isolated to the iOS WebView - Safari on iOS works fine without any of the following. But a Cordova app or a pinned iOS app exhibits this 'white out' behavior.
The workaround is to explicitly force the DOM to re-render the element using the 'scrollHeight reading trick'.
Here's the code that works:
vm.getAlbums = function() {
albumService.getAlbums()
.success(function (data) {
vm.albums = data;
setTimeout(function () {
if (albumService.listScrollPos) {
var el = $("#MainView");
el.scrollTop(albumService.listScrollPos);
albumService.listScrollPos = 0;
$timeout(function() {
var t = el[0].scrollHeight;
}, 1);
}
}, 1); // delay around animation 900
})
};
Notice the last $timeout() block that simply reads the scrollHeight of the element, which forces the re-render and properly displays the result.
There's a little jumpiness due to the slight rendering delay.
Strange issue.
Using jquery ui effect like this:
<a href="in" style="position:absolute;" ><img src="images/img.png" id="perlabot" ></a>
$('#perlabot').on('mouseenter', function () {
$(this).effect("shake", { times:2, distance: 3}, 120);
});
And it works but on IE and Firefox the image keeps shaking all the time even if the mouse is right in the middle of the image. it seems that moving image trigers mouseenter event all the time??
Cannot fix this, strange issue. On chrome it trigers just once.
I didn't find a real solution to your problem but you could easily avoid it by checking if a variable has a certain value and reset it if the user leaves the area.
var active = false;
$('#perlabot').on('mouseenter', function () {
if (active === false) {
active = true;
$(this).effect("shake", {
times: 2,
distance: 3
}, 120);
}
}).mouseleave(function () {
active = false;
});
Might not be the smartest way to solve it but it works fine in every browser I tested it (Firefox, Chrome, Opera, IE 10 and 9)
jsfiddle
Try this option. Similar concept to the above answer, but I think more robust. (no global status variable for example)
function shakeIt(obj)
{
obj.mouseleave(function () {
obj.on("mouseenter", function () { shakeIt(obj); });
obj.off("mouseleave");
});
obj.off("mouseenter");
obj.effect("shake", { distance: "3", times: "2" }, 120);
}
$("#perlabot").on("mouseenter", function () { shakeIt($(this)); });
Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js
I have an asp.net web site I am building to be supported on ipad. When I focus on an input element and the keyboard pops up, the position fixed header div(which normally scrolls along with the page) will pop up the page a distance equivalent to the amount the keyboard takes up and freeze there for the duration of the input process. Once the keyboard is dropped back down, the div snaps back into place and behaves normally again. I am testing on iOS5 so position: fixed should be supported.
Is this a known issue? Has someone come across this and dealt with it before? I can't seem to find anything on this.
Fixed positioning is broken on iOS5/iOS6/iOS7.
Edit 3: See link to a working fix near end of this answer for iOS8.
Position:fixed is broken when either:
a) the page is zoomed
or
b) the keyboard shows on the iPad/iPhone (due to an input getting focus).
You can view the bugs yourself in jsbin.com/icibaz/3 by opening the link and zooming, or giving the input focus. You can edit the edit the html yourself.
Notes about bugs (a) and (b):
A fixed div with top: 0px; left: 0px; will show in the wrong position (above or below the top of the screen) when an input gets focus and the keyboard shows.
The problem seems to have something to do with the auto-centering of the input on the screen (changing window.pageYOffset).
It appears to be a calculation fault, and not a redraw fault: if you force the top: to change (e.g. switching between 0px and 1px) on the onScroll event, you can see the fixed div move by a pixel, but it remains in the wrong place.
One solution I used previously is to hide the fixed div when an input gets focus - see the other Answer I wrote.
The fixed div seems to becomes stuck at the same absolute position on the page it was at at the time when the keyboard opened.
So perhaps change the div to absolute positioning when an input has focus? Edit 3: see comment at bottom using this solution. Or perhaps save the pageXOffset/pageYOffset values before the keyboard is opened, and in an onScroll event calculate the difference between those values and the current pageXOffset/pageYOffset values (current once the keyboard is opened), and offset the fixed div by that difference.
There appears to be a different problem with fixed positioning if the page is zoomed - try it here (Also good information here about Android support for fixed in comments).
Edit 1: To reproduce use jsbin (not jsfiddle) and use the fullscreen view of jsbin (not the edit page). Avoid jsfiddle (and edit view of jsbin) because they put the code inside an iframe which causes interference with fixed positioning and pageYOffset.
Edit 2: iOS 6 and iOS 7 Mobile Safari position:fixed; still has the same issues - presumably they are by design!.
Edit 3: A working solution for (b) is when the input get focus, change the header to absolute positioning and then set the header top on the page scroll event for example. This solution:
Uses fixed positioning when input not focused (using window.onscroll has terrible jitter).
Don't allow pinch-zoom (avoid bug (a) above).
Uses absolute positioning and window.pageYOffset once an input gets focus (so header is correctly positioned).
If scrolled while input has focus, set style.top to equal pageYOffset (header will jitter somewhat due to onscroll event delay even on iOS8).
If using UIWebView within an App on iOS8, or using <=iOS7, if scrolling when input has focus, header will be super jittery because onscroll is not fired till scroll finishes.
Go back to fixed position header once input loses focus (Example uses input.onblur, but probably tider to use
document.body.onfocus).
Beware usability fail that if header too large, the input can be occluded/covered.
I couldn't get to work for a footer due to bugs in iOS page/viewport height when the keyboard is showing.
Edit example using http://jsbin.com/xujofoze/4/edit and view using http://output.jsbin.com/xujofoze/4/quiet
For my needs, I found it easier to use an absolute positioned header, hide it before scroll and show it when finish scroll (I need the same code to support iOS4 and Android).
For my purposes, I hide the header on a touchstart event, and show it again on touchend or scroll event (plus some timers to improve responsiveness/reduce flickering). It flashes, but is the best compromise I could find. One can detect the start of scrolling using the touchmove event (jQuery does this), but I found touchmove didn't work as well for me because:
regularly the iPad fails to do a repaint before scrolling (i.e. the absolute header remains stuck - even though the top was changed before scrolling started).
when an input element gets focus, the iPad auto-centres the element, but the scrollstart event doesn't get fired (because no touchmove if just clicking an input).
Implementing a fixed header on iOS5 could be improved by using a hybrid approach of fixed and absolute positioning:
used fixed positioning for iOS5 until an input gets focus.
when an input gets focus (keyboard showing), change to the iOS4 absolute positioning code.
when the keyboard is closed, change back to fixed positioning.
Code to detect when keyboard is closed (e.g. using keyboard hide key) is to register the DOMFocusOut event on the document element and do something like the following code. The timeout is needed because the DOMFocusOut event can fire between when one element gets the focus and another loses it.
function document_DOMFocusOut() {
clearTimeout(touchBlurTimer);
touchBlurTimer = setTimeout(function() {
if (document.activeElement == document.body) {
handleKeyboardHide();
}
}.bind(this), 400);
}
My fixed header code is something like:
{
setup: function() {
observe(window, 'scroll', this, 'onWinScroll');
observe(document, 'touchstart', this, 'onTouchStart');
observe(document, 'touchend', this, 'onTouchEnd');
if (isMobile) {
observe(document, 'DOMFocusOut', this, 'docBlurTouch');
} else if (isIE) {
// see http://ajaxian.com/archives/fixing-loss-of-focus-on-ie for code to go into this.docBlurIe()
observe(document, 'focusout', this, 'docBlurIe');
} else {
observe(isFirefox ? document : window, 'blur', this, 'docBlur');
}
},
onWinScroll: function() {
clearTimeout(this.scrollTimer);
this.scrolling = false;
this.rehomeAll();
},
rehomeAll: function() {
if ((isIOS5 && this.scrolling) || isIOS4 || isAndroid) {
this.useAbsolutePositioning();
} else {
this.useFixedPositioning();
}
},
// Important side effect that this event registered on document on iOs. Without it event.touches.length is incorrect for any elements in the document using the touchstart event!!!
onTouchStart: function(event) {
clearTimeout(this.scrollTimer);
if (!this.scrolling && event.touches.length == 1) {
this.scrolling = true;
this.touchStartTime = inputOrOtherKeyboardShowingElement(event.target) ? 0 : (new Date).getTime();
// Needs to be in touchStart so happens before iPad automatic scrolling to input, also not reliable using touchMove (although jQuery touch uses touchMove to unreliably detect scrolling).
this.rehomeAll();
}
},
onTouchEnd: function(event) {
clearTimeout(this.scrollTimer);
if (this.scrolling && !event.touches.length) {
var touchedDuration = (new Date).getTime() - this.touchStartTime;
// Need delay so iPad can scroll to the input before we reshow the header.
var showQuick = this.touchStartTime && touchedDuration < 400;
this.scrollTimer = setTimeout(function() {
if (this.scrolling) {
this.scrolling = false;
this.rehomeAll();
}
}.bind(this), showQuick ? 0 : 400);
}
},
// ... more code
}
jQuery mobile supports scrollstart and scrollstop events:
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
function triggerCustomEvent( obj, eventType, event ) {
var originalType = event.type;
event.type = eventType;
$.event.handle.call( obj, event );
event.type = originalType;
}
// also handles scrollstop
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
}
// iPhone triggers scroll after a small delay; use touchmove instead
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
This is somewhat still a problem in iOS13 (when a long text gets deleted in the 'textarea' field, fixed header jumps to the start of that 'textarea' field, obstructing the view), therefore, I thought I share my quick fix:
Since my footer is rather large, I went about without any JS and just adding a greater z-index to the footer than what the fixed header has. Out of sight, out of mind.
I have something similar to this iScroll example: http://cubiq.org/dropbox/iscroll4/examples/simple/
Except that I'm using jQuery mobile (i.e., the header, footer, and content are set using jQuery Mobile). Everything is running smoothly except for scrollToElement.
Is there any way to get scrollToElement working when using jQuery Mobile and iScroll?
Here's the iScroll script I currently have:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);}, false);
EDIT: Forgot to mention what I'm trying to achieve. In the iScroll example mentioned above, I'm trying to scroll to a specific row. The only problem is that jQuery Mobile prevents scrollToElement from working for some reason.
Also make sure that you're using a timeout
setTimeout(function () {
myScroll.scrollToElement(".elementClass", "0s");
myScroll.refresh();
}, 0);
The workaround I have found is to capture the elements position and then use scrollToPage():
var w = $("#showselectedauthors").offset().top;
// ...
$.storeScroller.scrollToPage(0, w);
Of course for this to work you have to capture the position when the element is visible or the offset will be meaningless. You can do this when the page is built but before the scroller is initialized.
In my case the element is visible and I capture w at that time. I then refresh some content and refresh the scroller. After I do that I want to make sure the element is still visible.
Case anyone needs to scroll to a jQuery Object here's my code .
Make sure you're calling this method inside a setTimeout and your "iscroll" object is defined .
function scrollToElement($element) {
if ($element.size() > 1) {
throw new Error("Cannot be a node!");
};
var offset = $element.offset().top;
var to = -(offset - iscroll.y);
to = (iscroll.maxScrollY > to) ? iscroll.maxScrollY : to;
iscroll.scrollTo(0, to);
}