Determine hyperlink to use based on browser type in HTML

Question

I have a website which I have embedded lightview to bring up an iframe which has the Google Voice badge in it. This badge is flash based, so cannot be seen in iOS. In order to get a phone number to dial in iOS, it has to have a different format.

My question is how can I add logic to the HTML to know which type to choose based on the browser type (mobile vs normal)?

Full browser support:

Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.

Mobile browser support:

Feel free to give me a <a href="tel:1-408-555-5555">call</a>.

Answer 1

You can try to detect if Flash is available instead of detecting browser.

You can dynamically bind an appropriate click event handler to all links having href attribute beginning from tel: if Flash is available by putting following code to a JS-script included in HEAD element of your HTML document:

if (FlashDetect.installed) {
    // $ means jQuery which is used to bind `click` event.
    $(document).on('click', 'A[href^="tel:"]', function() {
        // [Some specific code for Flash-enabled systems.]
    })
}

Answer 2

HTML:

<span class="flash-enabled">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</span>
<span class="flash-disabled">Feel free to give me a <a href="tel:1-408-555-5555">call</a>.</span>

CSS:

.flash-disabled,
.flash-enabled {
    display: none;
}

JQuery:

$(document).ready(function() {
    if (FlashDetect.installed) {
        $('.flash-enabled').show();
        $('.flash-disabled').remove();
    } else {
        $('.flash-disabled').show();
        $('.flash-enabled').remove();
    }
});

The credits of the FlashDetect answer are from Marat.

Answer 3

Using JavaScript you can check for the touchstart event in document.documentElement to detect touch devices:

var isTouch = 'touchstart' in document.documentElement;

Then on Android you can check the userAgent to see if it's a mobile phone:

var isMobile = navigator.userAgent.toLowerCase().indexOf("mobile") > -1;

On IOS simply check for iPhone:

var isMobile = navigator.userAgent.toLowerCase().indexOf("iphone") > -1;

The rest of the party you can add on yourself. Hope you get the picture:

var isTouch = 'touchstart' in document.documentElement,
    ua = navigator.userAgent.toLowerCase(),
    isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;

A little complex.

---

Just to quick answer your comment:

onload = function() {
    var isTouch = 'touchstart' in document.documentElement,
        ua = navigator.userAgent.toLowerCase(),
        isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;

    if ( isMobile ) {
        document.getElementById("mobileLink").style.display = 'block';
        document.getElementById("browserLink").style.display = 'none';
    }
    else {
        document.getElementById("mobileLink").style.display = 'none';
        document.getElementById("browserLink").style.display = 'block';
    }
}

And your HTML:

<div id="mobileLink">Feel free to give me a <a href="tel:1-408-555-5555">call</a</div>
<div id="browserLink">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</div>