-1

I need to place a "Call us" button on my website that should dial a number on mobile devices when clicked. Now, I know it can be done via Call us

The problem is that when I open the site with Firefox on desktop, and click the button it gives the error that "tel" isn't associated with any program.

Hence, I want the desktop visitors to redirect to /contact-us/ when clicked on this button

Can anyone suggest I can I toggle b/w mobile and desktop functionality.

Thanks

henrymason
  • 109
  • 5

2 Answers2

1

You can use a media query to show the "Call us" button only on mobile devices screens. That'd be the most easy way to prevent the problem.

.call-us{ display:none; }
@media only screen and (max-width: 40em) {
  .call-us {
    display: block;
  }
}

You could also toggle the href attribute between tel:XXXXXX and /contact-us/ using modernizr's mq function:

if (Modernizr.mq('only screen and (max-width: 40em)')) {
  $('.call-us').attr("href", 'tel:XXXXXX');
}

This is just a desktop-first example, I don't know if it suits your code.

Why am I doing it desktop-first and not mobile-first? Because the contact-us link would always work but the tel one wouldn't. So, in case the toggle fails, the user still gets a nice UX.

jaicab
  • 236
  • 1
  • 7
0

You could use the jQuery remove method.

Call btn:

<div> <a class="call-btn" href="contact-us.html"> Call Us </a> </div>

JQuery on body:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(window).resize(function (){

if ( $(window).width() < 600 ) {

$('a.call-btn).remove();

}
})

</script>
Pain
  • 185
  • 1
  • 2
  • 14