I am using jquery mobile 1.3.0 RTL, which I have downloaded from a link. RTL works fine for all the form components except spinner/drop down in android. For drop down it uses the device's native control. It works perfectly on iOS devices but not in android devices it comes in LTR still. I tried to disable the native spinner by using the following javascript code.
$( document ).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)){
$("select").attr("data-native-menu","true");
}
else{
$("select").attr("data-native-menu","false");
$.mobile.selectmenu.prototype.options.nativeMenu = false;
}
});
The above code disables the native drop down and jquery mobile designs the drop down selection list. If I have below 10 items in the list it shows properly and it works fine but not for larger lists (Scroll is not working and data is not rendered properly in the list). I would like to go with the native spinner. For more specific, If I am accessing my application through google chrome browser when my language is arabic the spinner is working proper but not in the default Internet explorer. Because hybrid application uses only the web view of internet explorer. Is there any configurations specific to android applications?
The code which I was using for RTL is working fine. I have tested the drop down with english text. Whenever I changed my language to arabic the android native drop down alignment was changed. Thanks for your reply "Tasos"
Related
iOS 9.3.2
Phonegap Build 6.1
We're loading an iFrame from another vendor into our iOS app. The form loads perfectly fine. We tap on the form field and it does not allow any inputs. This occurs on multiple iPhones. The same app works on mobile safari and chrome. Phonegap is when these issues begin.
We've made changes to the CSS for
-webkit-user-select: none;
now everything is
input { -webkit-user-select: text; }
We've disabled faskclick.js and made the changes suggested, still the same thing.
Not sure what could be causing the problem. Any guidance would be appreciated.
According to Shazron and risingj at Adobe, this is likely an Apple rendering issue in UIWebView. They have no control regarding UIWebView's bugs, so this is something everyone should take into consideration. We've downgrade to cordova 3.7.0 and use "cordova-plugin-wkwebview", it works as intended.
I have tried this one: https://github.com/codef0rmer/angular-dragdrop together with touchpunch (http://touchpunch.furf.com/). On the browser it is working fine but when I deploy the app to an android device I receive following error:
$ui.mouse is not defined
Are there other alternatives to implement drag & drop for this combination ?
touchpunch requires jquery ui plugin. Verify if you included jquery UI in your page.
I am developing a web application for mobile where I am using jquery file up-loader plugin. from here
it works great on mobile Chrome and Mozilla. But don't work on default android browser. I want to hide the input where it does not support the plugin. I tried Google, no luck. Can anyone tell how to identify chunk support for the browser?
Try the following:
if(jQuery.fileupload())
{
//hide input code here
}
I'm completely lost when it comes to jQuery/Javascript so apologies in advance. I'm using the MixItUp jQuery filter on a Wordpress site which has the option to show either grid or list view (default), what I'd like to do is set grid as default when visiting the site using a mobile device.
This is what I have at the moment (I've been copying and pasting from around the web so probably not even close):
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(document).ready(function(){
$('#Grid').mixitup('toGrid');
});
Any help on this issue would be highly appreciated!
I have messed with detecting if a device is mobile or not a lot in the past and I have found it to be much easier to detect if it is not a mobile device versus detecting if it is a mobile device.
I like the searches you are doing, but you are missing a few like the Nook and Kindle a lot of mobile devices also use the word "mobile" in their user agent. With that said even if you include these in your search you will surely have more that pop up over the next few years. I have found it to be better to detect if it is a desktop or not because there are not new desktop operating systems being added on almost a yearly basis like we are seeing with mobile devices these days. Not only that but I have also found that older Android devices can return mixed results in their user agents.
Here is the bit of code we use to figure out if the device is Windows, Linux, Mac, Facebook, a bot, or a mobile device. We have used and tested this code a lot with all the different devices we have vising our site and it appears to be working correctly for all devices. I hope this helps!
$(document).ready(function(){
if (deviceType() == "Mobile")
$('#Grid').mixitup('toGrid');
});
function deviceType ()
{
var OSName="Mobile";
if (navigator.appVersion.indexOf("Win")!=-1 && navigator.appVersion.indexOf("Phone")===-1) OSName="Windows";
if (navigator.appVersion.indexOf("Macintosh")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1 && navigator.appVersion.indexOf("Android")===-1) OSName="Linux";
if (navigator.appVersion.indexOf("facebook.com")!=-1) OSName="facebook";
if (navigator.appVersion.indexOf("bot")!=-1) OSName="bot";
if (navigator.appVersion.indexOf("Slerp")!=-1) OSName="bot";
return OSName;
}
You want to wrap the "if" statement and function call inside the document ready call. Not the other way around:
$(document).ready(function () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
$('#Grid').mixitup({layoutMode : 'grid'});
}
});
So I have an existing desktop html site, but I've created a jquery mobile version. The thing is I'm trying to figure out how to load only the jquery mobile version for mobile phones, but show the desktop version for desktops. I couldn't find anything on the jquery mobile documentation.
You can essentially do with with jquery using the window width or by triggering it on CSS media query breakpoints. A few references below:
Triggering jquery with css media queries
http://www.venveo.com/articles/view/quick-tip-jquery-media-queries
I am however now sure of the ramifications of making it responsive... once jquery mobile kicks in, all bets are off.
You are probably better off calling the jquery mobile on a browser detection rather than a screen breakpoint.