CODEWITHSUNDEEP
javascriptjquerybrowser-detection
Xtian
Xtian

Reputation: 3587

Detect browser - show different links

I am detecting what kind of mobile browser a user has and would like to show the appropriate download link to the right App based on that. So Android to the Android App, Iphone to the Iphone App, etc.

so this simply puts out a True or False if you are using an iPhone or not:

<script type="text/javascript"> 
    <!--
        document.write(DetectTierIphone());
    // -->
</script>

I just need a nice simple Javascript if statement showing the iphone DIV if a the code above if TRUE. 

<div class="iphone">
<a>link</a>
</div>

<div class="android">
<a>link</a>
</div>

<div class="blackberry">
<a>link</a>
</div>

Any help getting this started?

Thanks

Upvotes: 2

Views: 2428

Answers (4)

dSquared
dSquared

Reputation: 9825

Try something like this:

<script>
$('div.iphone, div.android, div.blackberry').hide();

if( navigator.userAgent.match(/Android/i)){
    $('div.android').show();
} else if ( navigator.userAgent.match(/webOS/i) || 
            navigator.userAgent.match(/iPhone/i) || 
            navigator.userAgent.match(/iPod/i)){
    $('div.iphone').show();
)
</script>

I hope this helps!

Upvotes: 0

powtac
powtac

Reputation: 41080

if ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1)) {
    alert('iOS');
}

Upvotes: 1

N Rohler
N Rohler

Reputation: 4615

You need hide all divs initially, then use the .show() method:

var ua = navigator.userAgent;
if (/iPhone|iPad|iPod/i.test(ua))
   $('div.iphone').show();
else if (/Android/i.test(ua))
   $('div.android').show();
else if (/Blackberry|RIM\sTablet/i.test(ua))
   $('div.blackberry').show();

Upvotes: 2

Seybsen
Seybsen

Reputation: 15587

Try getting the info from:

window.navigator.userAgent;

it should contain hints on what device the user is using.

This seems to be a ready to use script you can use for it: MobileESP

Upvotes: 1

Related Questions