I am using Meteor Framework.
The following code
123-456-7890
or
(123) 456-7890
Initiates a call automatically in iOS.
I need some kind of warning.. such as pop up saying
Call 123-456-7890 ?
and if the user wants to call then they can press Call or else Cancel.
How do I fix this on iOS?
You have two options.
First, you could wrap the call link inside a pop up or modal. In your template:
<a class="open-popup">Call 123-456-7890</a>
Open the pop up via click event. In Meteor you can do this like this:
Template.myTemplateName.events({
"click a.open-popup": function(event) {
// Open pop up ...
});
In this pop up you place the link 123-456-7890 alongside with a cancle button, which is nothing else than a pop up closer. <a class="close-popup">cancle</a>
Second, use a click event with confirm() function and then do a url redirect to the `tel://ยด address.
Template.myTemplateName.events({
"click a.open-popup": function(event) {
var r = confirm("Call 123-456-7890 ?");
if (r == true) {
let phoneNumber = "123-456-7890";
window.location.href="tel://"+phoneNumber;
} else {
// closes
}
});
I guess, the second option is easier to implement and already does, what you are looking for.
Related
I'm loading the Zendesk web widget into a page, and this is the event handler for when it's loaded in
scriptElement.onload = function () {
zE(function () {
$zopim(function () {
$zopim.livechat.button.setHideWhenOffline(true);
$zopim.livechat.setOnStatus(function (status) {
console.log('status',status);
status === 'online' ? $zopim.livechat.button.show() : $zopim.livechat.button.hide();
});
$zopim.livechat.setStatus('offline');
});
});
};
It has the setOnStatus event handler which should trigger anytime the status changes. It seems to be triggered once when the page initially loads in. You'd expect it to be triggered as well everytime I call the setStatus method, but that's not the case. Where I log the status, it's always just 'online', and it only happens once.
What I'm trying to do is force the button to disappear when the status is offline. Yet setting the status to 'offline' doesn't hide the button, just displays the offline version (i.e. a button which lets me send an offline message, rather than a live chat).
I thought the setHideWhenOffline method might have helped, but that doesn't seem to make any difference in this case.
Any ideas?
Actually I found the solution I needed here, this prevents the offline button appearing.
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
}
}
};
https://developer.zendesk.com/embeddables/docs/widget/settings#suppress
I am using jquery mobile to close and open a menu in an app like this:
$('body').on('swipeleft', function(event){
if(menuOpen == true){
home.showMenu();
}
});
$('body').on('swiperight', function(event){
if(menuOpen == false){
home.showMenu();
}
});
And I have a input range (slider) in my menu like this:
<input id="changeRadiusRange" type="range" min="5" max="100" step="5" oninput="handleInputVal(value)" onchange="handleChangeVal(this.value)">
Now if I use my slider it stops after some time (I think the 30pixel for swipeleft/right to get fired and menu is closing if it is a swipeleft)
I already tried a few things regarding to this question, that results in this but didn't changed the behavior:
$('#changeRadiusRange').on('swipeleft swiperight', function(e){
e.stopPropagation();
e.preventDefault();
});
How can I force input behavior as normal not to be influenced by swipe-events?
I had the same problem today and found a less hacky solution.
var handleSwipe = function (event) {
// my swipe stuff
}
// regular event listening
$(document).on("swipeleft swiperight", handleSwipe);
// additional workaround
$(".slider").on("mousedown touchstart", function (event) {
// when starting to interact with a .slider, stop listening the event
$(document).off("swipeleft swiperight");
}).on("mouseup touchend", function (event) {
// when interaction stops, re-listen to swipe events
$(document).on("swipeleft swiperight", handleSwipe);
});
It seems that sliders never ever work properly, as long as the swipe events are used anywhere in the document. This is even the case, when there is nothing done in the event handler. Also preventDefault() and/or stopPropagation() doesn't change anything.
With this solution, I kill the previously enabled swipe events while the user interacts with a slider. When interaction is done, I re-enable swipe events. Works great for me.
This worked for me with jqm 1.4.5:
$(document).on('mousedown touchstart', 'input[type=range]',
function(e){
e.stopPropagation();
});
Currently solved it like this:
$('body').on('swipeleft', function(event){
if(event.target.id != "changeRadiusRange"){
if(menuOpen == true){
home.showMenu();
}
}
});
But then slider is stopping after the swipeleft event is called from body. does not move more to the left so I have to release the slider and slide again to the left if I need to till the swipeleft is called etc. Just workaround hope got it fixed soon
I am opening a bootbox dialog box when the user click inside select-2 input box using the following code
$("#categoryfinder").on("select2-open", function () {
bootbox.confirm("Are you sure?", function (result) {
Example.show("Confirm result: " + result);
});
});
Once it is opened, the popup window is not active and I have to click twice to close or to trigger any event on the popup
Please let me know if there is any solution for this.
EDIT: when I click inside 1, the popup is not active at 1,2,3, I have to click once to make it active.
I fixed this issue by doing the following changes
$("#allergenfinder").on("select2-opening", function (e) {
e.preventDefault();
excludeAllergenPrompt();
});
Is there any way to handle back button (device backbutton) as default functionality to move back page? I need to implement the same functionality on back button goes to previous page. If there is no previous page (first page) it exit the application. Is this possible in PhoneGap?
I also need to pop page before going to push another page is this posible in jQuery?
Checking window.location.length would be the easiest way to determine if you're on the first page, but this isn't available in Phonegap.
But since you're using JQM, you can either use the navigate event as Omar suggests or could manually count the number of pages shown and the number of pages gone back (same thing) and use this to determine if the first page is being shown and whether to exit the app. Something like this would work:
var pageHistoryCount = 0;
var goingBack = false;
$(document).bind("pageshow", function(e, data) {
if (goingBack) {
goingBack = false;
} else {
pageHistoryCount++;
console.log("Showing page #"+pageHistoryCount);
}
});
function exitApp() {
console.log("Exiting app");
navigator.app.exitApp();
}
function onPressBack(e) {
e.preventDefault();
if(pageHistoryCount > 0) pageHistoryCount--;
if (pageHistoryCount == 0) {
navigator.notification.confirm("Are you sure you want to quit?", function(result){
if(result == 2){
exitApp();
}else{
pageHistoryCount++;
}
}, 'Quit My App', 'Cancel,Ok');
} else {
goingBack = true;
console.log("Going back to page #"+pageHistoryCount);
window.history.back();
}
}
function deviceready() {
$(document).bind('backbutton', onPressBack);
}
$(document).bind('deviceready', deviceready);
As for the second part of your question:
Secondly i need to pop page before going to push another page is this
posible in jquery ?
It's not clear what you're asking here. Do you mean you want to show some kind of popup content like a dialog between every page change? Please clarify then I can help you :-)
I am using jquery.blockUI.js to show a popup for mobile application. Popup is shown when I click on button. But when I try to hide that popup on clicking outside that popup then it does not hide.
I am using this code to hide popup:-
jQuery('.blockOverlay').attr('title','Click to unblock').click(jQuery.unblockUI);
It works perfectly in desktop version of magento but Doesn't work for mobile theme.
Please help me how to solve this problem.
Try something like this..
function togglePopup(){
var selector = '#popup',
$popup = $(selector),
callback = function(e) {
if (!$(e.target).parents().andSelf().is(selector)) {
$popup.hide();
$(document).off('click', callback);
}
};
$popup.toggle();
if ($popup.is(':visible')) {
$(document).on('click', callback);
}
return false;
}