Google Places Autocomplete plugin isnt working in Firefox android - android

We are using google's places-autocomplete plugin on our website.
Of late we have received several complaints from our website visitors that this plugin isn't working in the Android version of Firefox. It works fine in the desktop version of Firefox however.
The problem can be simply observed by
Going to the places-autocomplete example here
Trying to enter a zip code in the "Enter a location" search input
You will observe the following 2 issues -
Google Auto-complete should show suggestions as you start typing the
zip code. But it doesn't until one types a space or , after the 5 digit zip code.
When the suggestions do show up (after typing space or ,), you can't choose the first suggestion. As you tap on it, the cursor moves back to the search input. You can however choose the second or third suggestion correctly.
Problem #2 is extremely annoying and frustrating for the user. We've had received several complaints about this.
I have confirmed this on Firefox version 36.0.2 on a Samsung S4 running Android 4.4.2.
How can this be resolved?

A work around for the second issue is to give the first autocomplete suggestion a top margin so the user can click it. Its not pretty but its functional.
css
.FirefoxAndroid .pac-container .pac-item:first-child {
margin-top: 20px;
}
js
<script>
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1;
if(is_firefox && is_android){
$('html').addClass('FirefoxAndroid');
}
</script>

I encountered the same issue today - the website I am working on is working perfectly on every web browser, the auto-complete as well except on FF mobile.
After trying 3-4 solutions the one that worked for me was to declare the var place at the top of my code.
I have something like that
var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'be'},
types: ['(regions)'] // (cities)
};
autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
...
}
It was not working only on FF mobile because I wasn't declaring place at the top.
Maybe it will help someone in the future who knows

Related

setting select to width 100% disables select function on android 5.1.x and Nexus-7 (phonegap build)

i've to work with phonegap build, cli 5.x and try to build a search form with several inputs, 3 of them are select boxes.
all works fine till i wanted to set the css of the select nodes to 100% with. If i enable this css the selection does not open any more.
My Android Device for testing that won't work is a Nexus 7 with Android 5.1.1 (Lollipop). On IOS and Android Devices with 4.x all is working fine.
The language we use is Typescript with JQuery and will be compiled to Javascript ES5 (commonJS Style).
Sample Script:
var sampleData = [{"val": 1, "text": "sample A"}, {"val": 2, "text": "sample B"}];
var myContainer $('#content-box');
var selectBox = $('<select>').attr('id', 'mySelectBox');
selectBox.append($('<option>').attr('value', 'none').html('-- none --'));
for(var index in sampleData) {
var obj = sampleData[index];
selectBox.append($('<option>').attr('value', obj['val']).html(obj['text']));
}
// code above works fine
$('select').css('width', '100%');
// this crashes the popup after compilation
// and i have to use phonegap-build
by the way, if i have extreme long content going over 100% of the screen with it works. just stretching seems to crash.
i don't work with jquery mobile, some features we build won't work with it !!!
tried external css also, same failure.
somebody has a workaround or a fix for it? somebody can confirm this solution?
Try setting an id for the element you want to modify,
then try
$('#select').css('width', '100%');
if id="select"

masked input not working in android mobiles?

I am using the digitalbush masked input jQuery plugin. It is working fine in web browsers and the iPhone browser perfectly, but it is not working for Android mobile devices.
My issue :
mask is
in input field _ - _ - ___.
When I type numbers it will 12345685555___--
Example: http://rossbender.com/temp/mask.html
Any suggestions? How can I solve this?
Thanks
Prasad.
I resolved this issue with three actions, which have fixed this for all Android 4.0+ phones:
Update masked-input to at least version 1.4
Add type="tel" to the input, to trigger the numeric keyboard
Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.
I tried using the raw script that Jonathan Rowny mentioned, but I was still having the same problem on an S3 - Chrome browser. I think it has something to do with inputs type="tel" and/or type="number". I ended up having to use another plugin. http://igorescobar.github.io/jQuery-Mask-Plugin/
jquery-mask (not to be confused with jquery-masked-input) is very similar but the syntax was slightly different. Hope this helps anyone else with this issue.
jquery-masked-input syntax:
$("#phone").mask("(999) 999-9999");
VS
jquery-mask syntax: ('#phone').mask('(000) 000-0000');
This was fixed awhile ago but for some reason the distribution posted on the website never took the changes. If you grab from the raw source, the fix works: https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js
After trying different mask libraries (Inputmask, ui-mask, ngMask) I ended up using jQuery-Mask-Plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ which works pretty well and is also lightweight and well documented and has angularjs, react ,... samples.
I just ran into this problem and resolved it by removing the attribute type="number" from the asp textbox. After that masked input worked even on mobile devices.
The library used in the question is no longer being maintained. I switched my application to jQuery Mask Input as it works great, has a very similar base init call to the former library making for an extremely easy transition and, at the time of this post, jQuery Mask Input is regularly maintained at GitHub.
My issue was with the phone number masker moving the cursor back to the second position when 3 or 4 digits were entered. The cursor continued to act odd after that point. The problem was noticed using jQuery Masked Input v1.4.1 (old library) in android tablets using Chrome post major version 51.
To further enhance the accepted answer of Tony Brasunas, add following snippet in jquery.maskedinput.js for point number 3 to dynamically increase maxlength so it doesn't interfere with caret action.
Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.
defs = $.mask.definitions;
tests = [];
partialPosition = len = mask.length;
firstNonMaskPos = null;
//insert snippet below
if (chrome && android) {
console.log("chrome && android");
var allAllowedRegExps = '';
jQuery.each(defs, function (key, value) {
allAllowedRegExps = allAllowedRegExps + key;
});
allAllowedRegExps = allAllowedRegExps.replace(/\[/g, '');
allAllowedRegExps = allAllowedRegExps.replace(/\]/g, '');
allAllowedRegExps = '[^' + allAllowedRegExps + ']';
var re = new RegExp(allAllowedRegExps, "g");
var actual = mask;
var replacedVal = actual.replace(re, "");
var actualValue = actual.length - replacedVal.length;
if ($(this).attr('maxlength') !== undefined) {
$(this).attr('maxlength', parseInt(this.attr('maxlength')) + parseInt(actualValue));
}
}
mask = String(mask);
This can be a quick fix:
var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);
// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
$('.price_input').attr('type','tel');
}
It worked for me by using 1.4.1 and setting the max length to one plus the number of chars in the mask. The mask limited the actual input and the max length +1 fixed the problem of not being able to type numbers in the field.

localStorage with Jquery Mobile works only 1 time on a new Android system

I am using the localstorage option to set a variable for using it in another page.The platform is Android
Just to simulate the problem, i just created 2 simple JQM pages and set the variable in page 1 and use it in page 2. That works fine for the first time. When i'm going back to page 1 and set a new value for the variable, page 2 tells me that it is the previous value(!). I'm a little bit lost how to use it. Can someone give me a clue how to manage this? The weird thing is that on an old Android version (like 2.3.3) it works fine, but on a new one (like > 4) it fails. I think it has something to do with ready() event?
Page 1 - Main page:
$(document).ready(function () {
$('#Klant_Lijst').delegate('li', 'click', function () { var x = $(this).data('nummer'); localStorage.setItem("Nummer", x);});
});
Page 2 - sub page
$(document).ready(function () {
GetFustInfoKlant(localStorage.getItem('Nummer'));
});
I hope someone can give me an hint in a direction. Thanks!
Please dont use ready() method, use JQM page events like pageshow, pagecreate, pagebeforeshow, etc..

html5 video tag to play full screen with Android

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.

Mobile Web - Disable long-touch/taphold text selection

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).

Categories

Resources