Are you trying to make phone numbers clickable on your website but don’t want it to be a link on a desktop computer? This tutorial will show you how to make the phone numbers on your website clickable with responsive development. I will take you step by step and explain each line of the jQuery function I have written.
Adding jQuery to your website
For beginners learning jQuery the very first thing you need to do is add the jQuery library to your website. You can do this be going to Google’s online library or by downloading the jQuery library from jQuery’s website and adding the file to your server. Make sure to add the script tag either before the closing </head> or the before closing </body>. If possible, adding the library and all your JavaScript before the closing </body> will actually help your websites Search Engine Optimization (SEO).
Creating the Function
Now the fun begins, time to write some code. We need to begin writing our function below the jQuery library; otherwise our function will not work. Let’s create a function and name it phonenumber(). We will also need to pass a perimeter in the () where we will be passing the html class on the phone number.
function phonenumber(phone){
}
Get the Window Width
The window width is the width of our browser window. We need to get the window width so that we can determine when the phone number will be changed to a link. The line below will get the browsers window width.
var window = jQuery(window).width();
Our phone number function should now look like this.
function phonenumber(phone){
//GET THE WINDOW WIDTH
var window = jQuery(window).width();
}
Determine if the mobile device is an Apple product
Since iPhones are smart and can detect phone numbers, we need to determine if the device is an Apple product, otherwise we will run into some weird issues. To avoid those weird issues we need to create a variable that will return either true or false and determine if the device is an Apple product.
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
An update of our function should now look something like this.
function phonenumber(phone){
//GET THE WINDOW WIDTH
var window = jQuery(window).width();
//DETERMINE IF IOS
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
}
Using if statement to set perimeters
Now that we’ve gotten our window width and created a variable to check if our mobile device is an Apple product, we need to create an “if” statement to check to see if these perimeters are true. This “if” statement checks to see if the mobile device is not an Apple product and that the window width is less than 767px wide. If both of these perimeters are met, the code inside this “if” statement will run. On a side note, I use 767px since that is the width of a portrait iPad, and I want to target devices smaller than that (hopefully phones, since tablets can’t make phone calls).
if(iOS == false && windoww < 767){
}
Again, here is what our function should look like.
function phonenumber(phone){
//GET THE WINDOW WIDTH
var window = jQuery(window).width();
//DETERMINE IF IOS
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
//IF NOT IOS AND WINDOW IS LESS THAN 767px
if(iOS == false && windoww < 767){
}
}
Getting The Phone Number in Our jQuery Function
We now need to get the phone number inside of a HTML element of choice. We do this by using jQuery’s .html() function in order to get the HTML inside the element. We target the phone number by using a class in our HTML and calling it with the function perimeter set when we initially created the function.
var phonenum = jQuery(phone).html();
Our function should now look like this.
function phonenumber(phone){
//GET THE WINDOW WIDTH
var window = jQuery(window).width();
//DETERMINE IF IOS
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
//IF NOT IOS AND WINDOW IS LESS THAN 767px
if(iOS == false && windoww < 767){
//GET THE PHONE NUMBER
var phonenum = jQuery(phone).html();
}
}
Applying the Link to the Phone Number
Now that we have the physical phone number in a variable we need to wrap a link around it so that it can be clickable on a mobile device. In order to wrap the link around the number and inside we need to again target the HTML element by class and use jQuery’s .html() function to change the HTML inside the element.
jQuery(phone).html(‘<a href=”tel:+1-‘+phonenum+'” title=”callUsToday”>’+phonenum+'</a>’);
This was the last piece of our function, our final function should look like the below code.
function phonenumber(phone){
//GET THE WINDOW WIDTH
var window = jQuery(window).width();
//DETERMINE IF IOS
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
//IF NOT IOS AND WINDOW IS LESS THAN 767px
if(iOS == false && windoww < 767){
//GET THE PHONE NUMBER
var phonenum = jQuery(phone).html();
//CHANGE HTML INSIDE ELEMENT TO MAKE PHONE NUMBER CLICKABLE
jQuery(phone).html(‘<a href=”tel:+1-‘+phonenum+'” title=”callUsToday”>’+phonenum+'</a>’);
}
}
Add Phone Number to HTML
Before we move into more jQuery, we need to add a span with a class around the phone number. For simplicities sake, I’m going to use a class of phonenumber. Our HTML should now look like the code below.
<span class=”phonenumber”>705-797-2455</span>
Using the Function
Now that we’ve created the function and added a span around our phone number, we can use the jQuery function we just wrote. Below our phonenumber() function, let’s open a document ready function. For those that don’t know what a document ready does, it tells the browser to wait until the document is ready to run the code inside it.
jQuery(document).ready(function(){
});
After opening the document ready, we can now call our function and define the class we’d like to target in order to get our phone number.
jQuery(document).ready(function(){
//CALL OUR PHONENUMBER() FUNCTION
phonenumber(‘.phonenumber’);
});
Together we have just created a function to make phone numbers on your website clickable with responsive development. Feel free to take this code and run with it. The web is Open Source for a reason. Sharing is Caring.
Enjoy!