Develop Reference

How to detect my document has reached the page bottom on mobile devices?

How can I detect my document has reached the page bottom on mobile devices?
I have this code works perfectly on desktop devices, but not on mobile devices, such as android phones,
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
any idea what else should I include in the code to make it work on mobile?

I am using it for infinite scroll. I have a "load more" link on nearly bottom of page.
jQuery( window ).scroll( function() {
var loadMoreLink = 'a.infinite-link';
var actualLink = jQuery( loadMoreLink );
if ( actualLink.length ) {
var currentPosition = jQuery( loadMoreLink ).offset();
var pixelsVisible = window.innerHeight - currentPosition.top + jQuery( window ).scrollTop();
if ( pixelsVisible > 100 ) {
// time to do some ajax call.
}
}
});

On Android Browser always getting image width 10810 with jQuery and FileReader

This is weird. I tried to pick up an image to preview it in a div using the HTML5 FileReader.readAsDataURL() function and a inline-image. This works fine on most browsers incl. iPhone's Safari.
But if I'm using the standard Android browser on a Samsung Nexus AND pick a photo which is stored on the phone I alwas get a width of 10810px and a height of 4286px regardless of which size the source image has, when I use a picture directly by taking a new photo it works. I get the correct sizes. :# I tried naturalWitdh, width, using jQUery and native javascript. All with same results
$('#file-input').change(function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = this.files ? this.files : this.currentTarget.files;
if (files && files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#picture')
.attr('src', e.target.result).attr('style', '')
.load(function () {
console.log('w:' + $(this).width());
});
};
reader.readAsDataURL(files[0]);
}
} else {
alert('an error message');
}
});

Have you tried hooking chrome up to your computer's chrome to see if the image and or divs are doing anything funky?

I had the same problem and found a solution for android (browser) 4.0 and up.
I found that it works correctly if you use the createObjectURL function to do something like the following:
function getImgSize(input) {
if (input.files && input.files[0]) {
var apiURL = (window.createObjectURL && window)
|| (window.URL && URL.revokeObjectURL && URL)
|| (window.webkitURL && webkitURL);
var url = apiURL.createObjectURL(input.files[0]);
$('#testImg').attr('src', url);
}
}
$('#testImg').on('load',function(){
alert($(this).width()+'*'+$(this).height());
});
$("input").change(function(){
getImgSize(this);
});
See http://jsfiddle.net/bravoman/qm2C5/5/ for a full example and use http://jsfiddle.net/bravoman/qm2C5/5/embedded/result/ to test it on your device/emulator.

keyup not working on Chrome on Android

I am using bootstrap typeahead.
It depends on this jQuery code to work:
el.on('keyup', doSomething() )
On Chrome on Windows it works fine. On Chrome on Android it doesn't. The keyup event is never fired. The element to which it is bound definitely has the focus.
This appears to be a recent development.
Chrome 28.0.1500.64
Android 4.1.2 SGP321 Build/10.1.1.A.1.307
Thanks
--Justin Wyllie

I came across this same problem earlier today. How can android chrome not support these key events! I assume you've found a workaround by now, but here's a fix that I came up with for now.
function newKeyUpDown(originalFunction, eventType) {
return function() {
if ("ontouchstart" in document.documentElement) { // if it's a touch device, or test here specifically for android chrome
var $element = $(this), $input = null;
if (/input/i.test($element.prop('tagName')))
$input = $element;
else if ($('input', $element).size() > 0)
$input = $($('input', $element).get(0));
if ($input) {
var currentVal = $input.val(), checkInterval = null;
$input.focus(function(e) {
clearInterval(checkInterval);
checkInterval = setInterval(function() {
if ($input.val() != currentVal) {
var event = jQuery.Event(eventType);
currentVal = $input.val();
event.which = event.keyCode = (currentVal && currentVal.length > 0) ? currentVal.charCodeAt(currentVal.length - 1) : '';
$input.trigger(event);
}
}, 30);
});
$input.blur(function() {
clearInterval(checkInterval);
});
}
}
return originalFunction.apply(this, arguments);
}
}
$.fn.keyup = newKeyUpDown($.fn.keyup, 'keyup');
$.fn.keydown = newKeyUpDown($.fn.keydown, 'keydown');

Sorry to say this but keyup/keydown events do not work for chrome browser in android.
There are other people who have reported this issue(Here and Here) from last 1 year and its not fixed yet. so it's better for developers to avoid using these events till it gets fixed.

phonegap 2.8 Capture video Duration always return 0 in android 4.2.2

iam using phonegap 2.8.1 when i try to get duration of captured video in android 4.2.2 (nexus 4) always return 0 ? why i tested on several devices all are working except in android 4.2.2 , then i change phonegap version to 2.7 then also same problem
navigator.device.capture.captureVideo(function(mediaFiles){
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
//uploadFile(mediaFiles[i]);
var mediaFile = mediaFiles[i];
console.log(mediaFile.fullPath);
mediaFile.getFormatData(
function(f){
var length= Math.ceil(f.duration);
if(length > 60){
navigator.notification.alert("Video Capture Limit exceeded Max limit 60 sec");
} else {
$('.upBtn').show('1000');
$('#startNow').text('Capture Again');
var videoNode = document.querySelector('video');
videoNode.src = fullTempPath;
$('#time').html("Dutration of Video == " + vidLength +" sec" );
}
},
function(){
navigator.notification.alert("Try Again..");
}
);
}
}, function(e){
navigator.notification.alert("Try Again.. Camera Error" + e);
}, {duration: 10000});

I am trying this myself! But why not use the
{duration: 60}
when you call
navigator.device.capture.captureVideo(function(mediaFiles)
change it to be
navigator.device.capture.captureVideo(function(mediaFiles), {duration: 60}
This is from the api in the 2.7 version of phonegap. The duration sets a limit on the duration of recording. The code will have to be changed to suit this way. It is supposed to be supported I cant get it to work on my dev. phone but it works according to phonegap groups. Hope this helps

Using iScroll prevents the keyboard from showing on my device

I am using iScroll for providing iPhone style scrolling. But, when clicking on the textboxes, the keyboard does not show up.
While trying to find the possible cause, I found that removing the iScroll script, makes it work normal, but in that case I miss the scrolling functionality.
Is this a bug in iScroll. If yes, is there a tested work-around? Or is there any alternative for iScroll?
Thanks in advance.

At least in iScroll 4, you can add this code to enable clicking of input fields. See the demo on Form-fields in the examples folder.
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

I was able to solve the error. The problem was with the CSS.
I thought may be the CSS is somehow creating the problem. I concluded this on the basis that when I commented the CSS for wrapper and scroller, the keyboard showed up... but keeping them, the keyboard didn't work. I was using bottom: 0px;, which seemed to be somehow preventing the keyboard from showing.
Removing bottom: 0px; solved my problem.
Hope this helps others.

I added the following code to _start in iScroll 4.2 to solve this problem:
if (e && e.target && e.target.tagName) {
var bFocusField = ('|INPUT|TEXTAREA|BUTTON|SELECT|'
.indexOf('|' + e.target.tagName + '|') >= 0);
if (bFocusField || that.focusField) {
if (bFocusField) {
that.focusField = e.target;
} else {
that.focusField.blur();
that.focusField = null;
}
e.defaultPrevented = false;
e.returnValue = true;
return true;
}
}
Code is inserted below the initialization part of the function (that.moved = false; ... that.dirY = 0;).
Tested it on iPad 1 (iOS 5.1) and iPad 3 (iOS 6). The onscreen keyboard does not seem to interfere with iScroll (I do an iScroll.refresh() every 5 seconds).

I believe this solution is optimal
Tweak the code in iscroll.js, ( as follows )
onBeforeScrollStart: function (e) {
//e.preventDefault();
if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea'){
return;
}
},