CODEWITHSUNDEEP
javascriptjqueryhtml
Dallas Clymer
Dallas Clymer

Reputation: 105

How Do I change a link for a mobile browser only?

I'm having trouble finding a way to do this. I was told I can use JavaScript or jQuery. Here's what I have.

Script:

<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) 
{
 document.getElementById('mylink').href = "http://google.com/";
}
</script>

Link:

<a href="#" id="mylink">

I even tried with: 

<a href="#" id="#mylink">

I'm suppose to have the link go to a website on any other browser, but if your on an iPhone go to iTunes link. If someone could help my figure this out I'd be much appreciated.

Upvotes: 0

Views: 246

Answers (6)

Manikandan Gurusamy
Manikandan Gurusamy

Reputation: 1

try this in userAgent.match('iPhone') instead of / and also where u r having this script either it should be below the a-link tag in html or the best way put it in a function and call it on onload function of body or jquery ready function both should work... Everything else good... Thanks...

Upvotes: 0

Mark
Mark

Reputation: 2504

With jQuery you could just use

$(document).ready(function() {
   if((navigator.userAgent.match(/iPhone|iPod/))) {
       $("#mylink").prop("href", <istore link>)  
   } else {
       $("#mylink").prop("href", "http://google.com")
   }
});

With you anchor tag being

<a href="#" id="mylink"></a>

I haven't tested this but should be right

Edit: Though i put in enough basic to figure it out.

Upvotes: 0

ComFreek
ComFreek

Reputation: 29424

Your script tries to access a DOM element which has not been loaded yet!

<script>
  if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) 
  {
   document.getElementById('mylink').href = "http://google.com/";
  }
</script>

<a href="#" id="mylink">

Solutions:

  • Reorder the elements: link tag, then the script tag
  • Recommended: Use an event such as DOMContentLoaded:
<script>
  document.addEventListener("DOMContentLoaded", function () {
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) 
    {
     document.getElementById('mylink').href = "http://google.com/";
    }
  });
</script>

Upvotes: 0

adearriba
adearriba

Reputation: 503

Using Browser detection is not recommended, it´s better to use size detection via css media queries. Bootstrap might help you alot:

http://getbootstrap.com/css/#responsive-utilities

Class visible ONLY phones: .visible-xs Class hidden ONLY phones: .hidden-xs

Use the url to learn more.

<!--Only Phones-->
<a href="#" class="visible-xs" id="#mylink">

<!--Anything else-->
<a href="#" class="hidden-xs" id="#mylink">

Upvotes: 1

Jonathan M. Hethey
Jonathan M. Hethey

Reputation: 714

Try to combine Marks document ready part with your current code. Also you can test it on your box by selecting firefox and chrome user agents and the JavaScript is much easier to debug in a desktop browser :)

Upvotes: 0

Patrick Geyer
Patrick Geyer

Reputation: 1525

Detect mobile like this:

 var isMobile = navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);

if(isMobile) {

   document.getElementById('mylink').href = "http://google.com/";

}

Upvotes: 1

Related Questions