I am developing a responsive web site and one of the requirements is to have elements that are only 'clickable' on mobile devices, especially iPhones and iPads (not on PC browsers).
Say for example, displaying phone numbers which can only be clicked on an touch device ... but on desktop browsers it should only display and not be clickable.
Is it possible to this?
If so, can anyone guide me on how to go about doing this please.
Thank you.
You can use PHP user agent detection,for example like this:
<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],"iPad") || strstr($_SERVER['HTTP_USER_AGENT'],"iPhone")){
echo '<a href='foo'>bar</a>'
}
else{
echo 'bar'
}
?>
Or in JavaScript (replace bar with the link location and foo with a fitting id.):
function iPhoneLinks(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {
document.getElementById('foo').href='bar';
}
}
<body onload='iPhoneLinks();'>
<a id='foo'>This will only be a link on iOS</a>
Untested but should work
Related
I have a web application in Angular, which is also converted (correct me if I call it the wrong way) to IOS app and I can open it in testflight app. My links which redirect to outer pages in new tabs are not working. Emails too. I have been trying to open app in a simulator but the console doesn't show any problems. My buttons simply don't work, but only on this app. When I open app on my iPhone in safari it works fine. Have you any idea what's going wrong?
As I mentioned, I tried using the simulator to find a possible error in the console. However, nothing of the sort occurs.
An example of my button implementation:
<a [href]="item?.link"target="_blank"class="no-text-decoration">
<app-custom button[color]="CustomButtonColor.Dark"
[id]="'{{item?.name}}Button'"
[type]="CustomButtonType.ButtonExpanded">
{{ 'profile.legalItems.read'| translate }}
</app-custom-button>
</a>
One solution to this issue would be to remove the target="_blank" attribute and use the window.open() function to open the links in a new tab. Here is an example of how you can modify your code to achieve this:
<app-custom-button (click)="openLink(item?.link)" [color]="CustomButtonColor.Dark" [id]="'{{item?.name}}Button'" [type]="CustomButtonType.ButtonExpanded"> {{ 'profile.legalItems.read'| translate }} </app-custom-button>
openLink(url: string) {
window.open(url, '_blank');
}
Alternatively, you can also try using the window.open() function with the target parameter set to '_blank'.
<a [href]="item?.link" (click)="openLink(item?.link)" class="no-text-decoration"> <app-custom-button [color]="CustomButtonColor.Dark" [id]="'{{item?.name}}Button'" [type]="CustomButtonType.ButtonExpanded"> {{ 'profile.legalItems.read'| translate }} </app-custom-button> </a>
openLink(url: string) {
window.open(url, '_blank');
return false;
}
I have a webapp that wants to offload walking / driving directions to a phone's native apps. This would be Google Maps app and maps.apple.com for Android and iOS respectively. I can detect the phone from the user agent presumably, but I can't work out how to configure the link.
<li><a href ng-click="geoHandler()"> Directions</a></li>
This is what I have in the relevant controller.
$scope.geoHandler = function() {
// user agent sniffing here
var path = "geo:0,0?q="+$scope.resto.lat+","+$scope.resto.lng+"("+$scope.resto.rname+")";
// var path = http://maps.apple.com/?ll=$scope.resto.lat+","+$scope.resto.lng
return $location.path(path);
}
When I had the geo link as the href in the html, the phone did the right thing, but now this code is taking me simply to the home page of my SPA.
So, my questions are:
is ng-click the right way to go (I can't use a function with ng-href I think);
how do I launch an intent via $location?
OK, I moved to a different and simpler approach. Not sure whether it is the most elegant, but it works.
View
<a ng-href="{{geoPath}}">Directions</a>
Controller
if ( /iPhone/.test(navigator.userAgent))
path = "http://maps.apple.com/?ll="+$scope.resto.lat+","+$scope.resto.lng";
else path = "geo:0,0?q="+$scope.resto.lat+","+$scope.resto.lng+"("+$scope.resto.rname+")";
$scope.geoPath = path;
I am trying to run a javascript only on mobile phone using Foundation and Rails, (and haml, this is haml example, but don't pay attention to that).
I am doing something like this:
.row
=# something for large screens
.row.show-for-small-only
.small-10.small-centered.columns
= javascript_tag "$('.someClassIPointTo').myfunction();"
So I am trying to run this javascript only for small size screens, and NOT for large screens. Is there a way for doing that other then duplicating the code?
You can use simple javascript to detect whether the device is mobile or not and then, run the code you want.
if( (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) &&
(window.innerWidth < SCREEN_WIDTH) && (window.innerHeight < SCREEN_HEIGHT) ) {
// some code..
}
Source: What is the best way to detect a mobile device in jQuery?
I have found an answer to my own question, and here it goes:
I have added a class .my_indicator_class inside .show-for-small class. Something like this (haml example):
.show_for_small
.my_indicator_class
And then in my javascript code I have used it to check whether this element is visible, like this:
var isVisible = $('.my_indicator_class').is(":visible");
if(isVisible){
//My code that will run only for small screens
}else{
// Code for big screens :)
}
And whola, that's it.
I'm using Jquery Mobile to develop an web app for Android and iPhone. I want to handle the event when the users change their value in the input text field.
Initially, I use .on("keyup change") and everything seem to work ok. However, when the users paste some text on the text field (by holding and tap on the "Paste"), my event handler is not called.
Please help me if you know how to solve this problem.
Thank you all.
Works on all browsers but not on FireFox.
Demo
$('input').on('paste', function (e) {
if (e.originalEvent.clipboardData) {
var text = e.originalEvent.clipboardData.getData("text/plain");
$('p').empty();
$('p').append(text);
}
});
Credit goes to: jQuery Detect Paste Event Anywhere on Page and "Redirect" it to Textarea
For Android add a timeout as it is in this example http://ajax911.com/numbers-numeric-field-jquery/
For iPad add event 'change' together with paste, worked on iphone
Here is what worked for me on mobile Safari and Chrome.
if (document.getElementById('search_input')) {
document.querySelector('#search_input').addEventListener('paste', (e) => {
let pasteData = (e.clipboardData || window.clipboardData).getData('text');
pasteData = pasteData.replace(/[^\x20-\xFF]/gi, '');
window.setTimeout(() => {
//do stuff
});
});
}
I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).
The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).
An example of the form can be seen here.
The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.
$('body').delegate('#byEmail_label', 'click tap', (function(event) {
if (!$("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
})
);
I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.
Has anyone experienced something similar, or have any idea how I can get this working?
Thanks
Finally fixed my own problem by moving all my jquery outside the
$(document).ready(function () {...
and into
$('*').delegate('body','pagecreate', function(){...
ie:
$('*').delegate('body','pagecreate', function(){
$('#byEmail_label').tap(function(event) {
if ($("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
});
});
Now my head feels better... no more banging it on the desk...
I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.
alert($('input[name=byEmail]:checked').val());
or
var cb_val = $('input[name=byEmail]:checked').val() == true;
or
var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;
Maybe something like this
var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;
if(addValidation) {
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
} else {
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}