jQuery Sniplet to make a website phone number dial on mobile browser.
The Problem
The other day I was looking for a way to make a websites phone number dial the phone number when viewing the site in a mobile browser.
Solution 1 :
The Easy and not fully supported version is to add
<a href="tel:555555555">555-555-5555</a>
to your telephone number. The tel: code is supported by most mobile browsers and works great. However when not in a mobile browser you will get this error -
Alert – Browser does not know how to open this address, because the protocol (tel) isn’t associated with any program.
The Solution
I decided to write a quick little jQuery script that will check to see if the view-port is less then 500px wide – if so it wraps any item with the class mobile_tel in the appropriate link.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p class="mobile_tel">Click Here with your Mobile to dial 555-555-5555</p>
<p>World</p>
<script>
if (screen.width <= 500) {
$('.mobile_tel').each(function() {
$(this).wrap("<a href='tel:5555555555'/>");
});
}
</script>
</body>
</html>
Most mobile browsers will try and “sniff” out phone number and make them link automatically. This makes sure they can find the phone number
Leave a Reply
Want to join the discussion?Feel free to contribute!