I have created a very minimal web app where in on click of button, the mobile camera should open up. In the component, I have checked for whether the browser supports webRTC and then camera should be invoked.
Based on the documentation which I went through on Google developer site I found that putting:
<input type="file" accept="image/*">
Should work with a capture attribute which decides which camera to open up. The documentation also states that in browser a file selection option would come for the same input tag.
Stating all that for me the input tag never works either on browser or mobile. There is not much available on the net and was wondering if someone can help me here. With the video tag the camera does work but that comes embedded inside the webpage. I want the device camera should open up on click of button so that I have all the capabilities which is normally there with the camera.
So, seems like I was making a very silly mistake because of which the input tag was not working.
The input tag to work with the camera required three attributes:
<input id="accessCamera" type="file" accept="image/*" capture="user">
Related
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.
Does anybody know how can we get the form controls references in a web page that loaded in the CodeNameOne Web browser component?
I want to load a web page in CodeNameOne web browser component, then read or change the value of form input controls (For example TextBoxes) in the java code after pressing the submit button.
Regards,
Kasra
Its not an ideal way to work and would reduce the portability of your application. You can look at the JSObject class that represents a bridge between the JavaScript and Java sides.
I have this issue here with the IE/Safari browsers, I have an IFrame with a PDF as it's content, and when i try to show a modal dialog it opens under the IFrame not above it, I tried to change the IFrame z-index/Position with no luck, and it seems to be an issue with the PDF plugin itself because I can see the IFrame borders behind the modal dialog
Any suggestions would be much appreciated :)
I have an update:
Ok, I am now positive that this is a PDF plugin issue not the IFrame, the IE put the PDF on top and no other component is allowed to overlay it
While i was searching I came a cross the PDF.js, it's very nice and doesn't rely in the browser PDF plugin, the only issue is that you cannot give it a stream to display!!! you have to provide a path to the PDF file on your server, which won't work for me
will keep you guys posted :)
I've ended up using the ViewerJS plugin to view the pdf documents inside the IFrame, it's very simple and you can embed it in your application, mine was MVC, you also can pass a stream or an url to your document, here is the link for their website, forgot to mention that it's for free :)
http://viewerjs.org/
Does anyone know the name of this button at the bottom of IOS Mobile Safari? It's the button at the bottom of the phone that is a box with an arrow coming out of it.
Also, can it be targeted from the browser via javascript?
Thanks
From Xcode's attributes inspector the button's identifier is "Action".Mobile safari does not prove any JS API to allow us to call the social activity.But you can us other social API such as Socialist.
I'm having a problem with IE7 when clicking on images that open up using the Lightbox 2 javascript image viewer. Instead of overlaying the image on the current page it opens the image into a separate page.
Not sure if this is an AJAX problem possibly ? Works fine in Firefox.
Anybody else come across this before ?
Your page is performing the fall-back behaviour you would expect in the following scenarios...
JavaScript is disabled
There is an error in the JavaScript that is creating the lightbox effect (look out for a very brief flash of the yellow error icon before the next page loads - or fire up some dev tools)
There is a JavaScript error on the page before the image is clicked, which has stopped execution of JavaScript on the page (look out for the yellow error icon in the status bar again!)
The only thing I can think of is that I have google toolbar amd McAfee security installed that may be blocking the overlay (????) but don't think that should make any difference.