How do I disable tel: URLs for desktop while keeping them live(dialable) for phones?

Question

I am working on an interactive map project in which a phone number is shown in an info window for each respective facility location on a map, along with an address and a link to a separate web page that has more info about that facility. I have the phone numbers set up as hyperlinks using tel://+1-xxx-xxx-xxxx, and they are styled so they just look like bold text, not default hyperlinks. On the desktop, naturally the cursor changes to show there's a link when you roll over the phone number. If you click on it, you can get varying results, most of which my client would prefer not to have. So, we want the phone numbers NOT to be functional on the desktop, but keep their functionality on the phone as they are now. I am guessing it will take extra code to disable the tel: URLs on the desktop only, but if anyone knows of something I can do directly in InDesign and/or in5 with settings to make this happen, that would be great. Or, if there IS some self-contained code I can attach to the in5 dialog box when exporting (multi-page web), please point me in the right direction. I've already done some research on this, but am finding conflicting info. I'm trying to avoid creating two versions and having to do device detection to serve the proper one. We want to keep this as streamlined but functional as possible. Thanks for your help!!

Answer 1

You can attach the following as a .js file in the Resources section of the in5 dialog:

if(!touchEnabled) {
	$(function(){
		$("[href^='tel:']").css({'pointer-events':'none', 'cursor':'default'}).on('click',function(e){ return false; });
	});
}

It should override the click actions on any telephone line on non-touch devices.

Comments

Thanks for the quick reply! Do I have to name the .js file something specific?

---

Nope. It just has to be a plain text file and have a .js extension. You can then attach the file before exporting.

---

Hi Justin. I tried the above code. Saved a file in Brackets called overridePhoneDesktop.js and appended it to the Javascript in the Resources section before exporting. The phone numbers are behaving as before...the cursor is still indicating there's a hyperlink for the phone numbers when viewing on the desktop. FYI, I created the hyperlinks for the phone numbers in InDesign by selecting the actual text and applying a tel:// URL in the hyperlinks panel. I did not create a button over top of the text. Does that make a difference? Please let me know why it might not be working. Thanks! MC

---

The original JS only blocked the action. I've edited the above to keep the cursor from changing as well.

---

Hello. I tried the updated code (thank you). It is not working for some reason. I tried posting the site files twice to the server; once with the js appended and once not appended, just to see if that made a difference. It didn't. Do you think there is something about MacOS that is treating the URLs as special and forcing the link to the phone numbers? When I click on them on the desktop (the cursor still changes to the hand pointer) I am given the option of opening Facetime. If the js code is supposed to suppress that cursor change and action happening, perhaps the OS is overriding those instructions? Unfortunately, I don't have a non-Mac desktop computer to test my theory. I do know that somehow, we want to suppress the cursor change and any resulting actions for phone links on ANY desktop system if possible, and only have the phone numbers live on phones. Am I implementing something incorrectly?

---

Please share you zipped up output and I'll take a look:
https://ajarproductions.com/pages/contact.php?category=in5&software_issue=bug

---

Thanks for sharing the files. I updated the code above to fit your document.

---

Justin, IT WORKS!! Once I re-exported all the files and re-posted to the server, the desktop and phone are working as hoped, respectively. Thank you so much for working to solve this request. My client will be very pleased with this functionality.

---

Happy to help! :-)

---

Justin, and anyone else who's looking to address this need: The .js code that wound up solving the problem of disabling phone number links on desktop computers is shown below. I believe K.O. emailed you a clarification on more recent iOS requirements that were causing some issues with the code above that I said worked (but didn't after further testing). So here is what seems to have worked:
-----------------
if(!isIOS && !(/iPad|iPhone|iPod/.test(navigator.platform)) && !isAndroid) {
  $(function(){
    $("[href^='tel:']").removeAttr("href");
  });
}

---

And thank you for suggesting who to talk to. Worked out well and much appreciated.

---

So glad you worked it out. KO did circle back to me. The code in the official answer above will work as expected in v3.6. Until then, the code that you posted will work with v3.5.4. :-)

---

I'll have to keep that in mind if I'm still working on this project when 3.6 comes out! Then I'll be appending the wrong code. :-o  So if some day I export the site and it's broken, I'll know why. :-)

---

Don't worry. Your code will still work. :-)