I have a link on a website that opens an iFrame in a popup box using jQuery. The jQuery script applies this function only to the link that has the specific attribute 'id=calcPop' as you can see here below.
<a href="calculator.html" id="calcPop">Click here</a> It works great on all computers, but is very buggy on mobile devices. Is there a way to detect if a user is on a mobile device and then change that to not have an 'id' attribute?
If you can't use a serverside language like PHP, then just remove the ID using JS – if you have jQuery, something like this will do the trick:
$("#calcPop").attr("id", ""); To detect whether you are on a mobile device is fairly involved as there are lots of mobile devices.
You could use something like:
var isMobile = navigator.userAgent.match(/Mobile/i) != null; To find things with Mobile in the UA (that will match iPod/iPad/iPhone), not sure about others, you'd have to check.
Putting it together, in your document.ready closure:
var isMobile = navigator.userAgent.match(/Mobile/i) != null; if (isMobile) { $("#calcPop").attr("id", ""); } In PHP you could do something like:
<?php $isMobile = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Mobile'); if ($isMobile) { $id = "calcPop"; } else { $id = ""; } ?> <a href="calculator.html" id="<?= $id ?>">Click here</a> 
