1

I am using this code to launch a popup form for people to contact us

<a id="pinfo" class="ajax pullup cboxElement" href="#contact-form">Enquiries</a>

However this popup form doesn't behave nicely on mobile browsers.

I was wondering if I could use some javascript code to detect mobile browsers and point to an e-mail address link in the href instead of the popup form.

Omar
  • 32,160
  • 9
  • 67
  • 108
JoaMika
  • 1,382
  • 3
  • 23
  • 50
  • 1
    possible duplicate of [What is the best way to detect a handheld device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery) – CodingIntrigue Sep 09 '13 at 12:02
  • thanks RGraham but the topic you pointed was created 3 years ago and the top answer has conflicting views... Furthermore it doesn't specifically relate to changing HTML content as my requirement. – JoaMika Sep 09 '13 at 12:16
  • That's OK, there are many answers there. The thing to take away from a question like this with so many answers and no definitive answers, is that there is no magic bullet - you just have to look at the one which best suits your situation. – CodingIntrigue Sep 09 '13 at 12:19
  • Are you using jQuery-Mobile? – Omar Sep 09 '13 at 12:33
  • i am using jquery.js?ver=1.8.3 – JoaMika Sep 09 '13 at 12:37

1 Answers1

0

If you would like something simple a solution like this will work.

Once the page has finished loading, it will check the width of the screen.

If it detects a small screen, it will replace the HREF with an email link

$(document).ready(function(){
    if ( screen.width < 800 ) {
       $('#pinfo').attr('href','mailto:email@address.com');
    };
});

Another method is to detect handheld devices instead of screen width like below:

$(document).ready(function(){

if(     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
       $('#pinfo').attr('href','mailto:email@address.com');
  };
  });

Depending on what your goals are one of these solutions should meet your needs.

best of luck!

Steve Papa
  • 422
  • 2
  • 9
  • simple solutions are the best. i will check this out.. does this cover ipad as well ? – JoaMika Sep 09 '13 at 12:37
  • What this does is to check the width of your browser screen adn if it is bellow 800px it wil change the attribute href on the link with id 'pinfo'. Be aware that this will also happen if the browser starts as not maximized and it's width is below 800. – syd619 Sep 09 '13 at 12:43
  • have updated answer to provide two solutions, both will work for your scenario. – Steve Papa Sep 09 '13 at 12:53
  • thanks so much - neat & simple - will test both hopefully today – JoaMika Sep 09 '13 at 13:14