I'm using <input type="date"/> According to caniuse.com android browser does not support this yet. Although I look at the the page on the HTC One 4.1.x, which has its own native rendering for the input field. Samsung Galaxy S3 4.1.2 has a rendering style for the component as well. Yet caniuse.com says its not supported. HTC and Samsung have clearly added this functionality into their version of android browser. The date picker on the S3 4.1.2 crashes the browser on more than one S3?
Steps to replicate, appears to be more common on first visit of the page:
Select the date picker move the month down twice.
Select set.
Page crashes/becomes unresponsive.
I'm using Modernizr, Modernizr tests the browser to see its functionality. On the HTCOne and S3 modernizr does not bring in the polyfill i'm using, this is correct.
So IOS works fine, Android does not. How can I get around this without a nasty hack in the modernizer "test:" Attribute?
Thanks, long one to read, but an interesting bug at best.
Mike
Not all Android systems are the same. Since everything is constantly getting updated, you're bound to get some small deviations like what you're getting. If you want more universal support, try using multiple selects or using the jQuery UI datepicker.
Related
I am looking at trying to scan barcodes from a mobile device.
I been doing some research and I having hard time finding JavaScript libraries that can do this.
I see these projects
zxing
This seems to be no longer in development and just bugs fixes are done?
QuaggaJS
This one, I am not sure if it is development either anymore as changelog is from 2017
quagga2
This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?
What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).
I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.
I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?
I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).
Just been doing this same research myself. All of those open source ones you listed seem to be either dead or have performance/reliability issues. Looks like only the commercial versions are really viable at the moment:
Dynamsoft - https://www.dynamsoft.com/store/dynamsoft-barcode-reader/
Scanbot - https://scanbot.io/products/barcode-software/web-barcode-scanner/
There are also two different mobile apps that are viable. These are web apps that just display a browser view and make a barcode scanning function from the app itself available on the page:
https://berrywing.com/scan-to-web-app/
https://www.mochasoft.dk/iphone_barcode2.htm
The second one has a more capable JS API of the two.
UPDATE: I went with that last option from Mochasoft. Turned out quite well.
Actually we have developed a Touch event-oriented web-application using the CreateJS library.
These libraries to work in touch monitors, we need to enable touch API manually at the Chrome browser. So we have Enabled those flags in the older version.
But it's not working in the new version of Chrome - version 79. Because of Touch API in Chrome has been disappeared in the latest version.
We get another option to enable those Events in the latest version to set target properties at chrome "--touch-events".
My real question is can we enable the touch event API, without making any manual property change in the Chrome browser. Our application is being viewed by many people across the globe. We cannot ask them to do this setup in their local chrome settings. It is very difficult for us to convince the users to make these changes in their local PC settings.
Our wish is to make the changes in the code level so that we no need to ask the users to configure their Chrome.
Do we have any alternative options to enable touch events API in code level without manual setup..?
I've recently fixed the same problem with our software.
If you're using the latest CreateJS.js you should be able to swap it with the one here which contains the fixes for touch:
https://github.com/CreateJS/EaselJS/tree/0.8.3-TOUCHFIX
Alternatively you can use this touch fixed version of createJS:
https://zimjs.org/cdn/1.2.3/createjs.js
If you're using an old minified EaselJS library moving to the newer createJS library could break your apps (as some functions have been deprecated). In this case your best bet is to copy the Touch.js class code out of the TOUCHFIX createJS library above and simply append it to the end of the Easel library you are using (effectivelly overwriting the old Touch.js class it contains).
This should fix things.
There's an indepth discussion of the issue here:
• https://github.com/CreateJS/EaselJS/issues/997
What features (HTML, JS, CSS, Web APIs), outside of plugins, are available in a cordova web view ? I am making a web app, and then I use cordova to create an apk file. The web app works fine with chrome and firefox for android. But when I try the generated apk on the same android device and the emulator the JavaScript is obviously not executed because buttons have no effect.
The initial HTML and CSS display fine, and I think I use some JavaScript or HTML5 features that are not available yet on cordova web view, but I don't know what I can use and what I cannot. I had a look at the emulator's error log but I get nothing meaning-full.
For example is it possible to use es2015 without transpiling, esModules etc, but I don't know where to look it up. What is the difference between a webview browser and chrome/firefox for android.
Targeting Android 4 and later.
https://cordova.apache.org/
It's probably easiest to look at the architecture diagram: https://cordova.apache.org/docs/en/latest/guide/overview/index.html.
Cordova apps consist of a small wrapper around a WebView (this is a "window" of the default browser installed by your mobile OS, although you can swap it out for another: https://cordova.apache.org/docs/en/latest/guide/hybrid/webviews/), with access to the mobile device's features via plugins. So... to answer your questions:
You can use any technology that's supported by the mobile browser you're working in. https://caniuse.com is super helpful in this regard.
You will also find that Android 4.x's stock web browser is not that great -- some of the shiny new popover UI stuff (walkthrough help and light boxes) will render, but the z-order is all messed up when you try to click to the next item. I've run into other issues as well, but I can't remember them off the top of my head.
The Crosswalk project allows you to embed a Chrome browser web view in older Android versions (back to 4.x I think). Support for this project has been discontinued in the latest Cordova releases, as it's no longer necessary.
I want to implement some mechanism to automatically selecting UI language for my Cordova application. The application is also served from the web (i.e. browser).
From what I see, I can either use the Cordova globalization API plugin (here) or, it seems that both Android and iOS support navigator.language which give the device language.
Is there any reason I should opt to use the Cordova plugin over the built in browser/Web View property?
Thanks!
After a series of searches and tests on real devices I can say that the two methods to retrieve the language of the device are more or less the same except for two small differences:
on iOS devices the user can choose separately the language and the region of the device. So, for example, it can choose as a language italian but as region USA. In this situation, the plugin will return the string it-US differently by the navigator.language property which will return the string it-IT (tested on iOS 11). If you have to know just the language this isn’t a big problem.
On Android, there is a bug because of which the navigator.language is not immediately updated. The new setting is available only after the application is killed. The plugin does not suffer os this bug. A workaround could be to use the navigator.languages property which is correctly updated (tested on Android 5.0.2).
If you have to know just the language you can use the information provided by navigator object without any problem.
I have recently started using html, javascript and css to build an app with PhoneGap. The first time I uploaded and ran it on my iPhone (running iOS 7) it showed the regular iOS 7 keyboard and picker. I then made some changes to the app, uploaded it and ran it but the keyboard and picker had reverted back to iOS 6 and before keyboards. Now what?
I am not using any external javascript frameworks right now and not using an IDE, just a simple code editor for explicitly writing the code.
Picker refers to the UIPickerView that shows in iOS web views on combo boxes.
Had the same issue for a while. I figured it was the javascript framework's fault. The real issue was the launch image. If the launch image doesn't fit the exact specifications it will launch the app in compatibility mode.
You can find the necessary specifications here: https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/ExpectedAppBehaviors/ExpectedAppBehaviors.html#//apple_ref/doc/uid/TP40007072-CH3-SW3
As an aside, I used this app from the mac app store in order to get the launch images exactly right. Worked great for me. https://itunes.apple.com/gb/app/asset-catalog-creator-free/id866571115?mt=12