Clever Geek Handbook

How to disable img <a href> link on mobile only, allow online?

Using jQuery or some other method, I want to disable all links on mobile and tablets, but still allow links to work on the website. The code I have is:

<div class="large-12 columns photos">
  <div><a href="larger_image1.jpg"><img src="image1.jpg" /></a></div>
  <div><a href="larger_image2.jpg"><img src="image2.jpg" /></a></div>
  <div><a href="larger_image3.jpg"><img src="image3.jpg" /></a></div>
</div>

Strategy: sniff the user's device, then if mobile, link to "javascript: void (0)" or similar.

Hope this is a good question this time. I did some searches both here and on google but couldn't solve.

Thank! Brian

+3


source to share


3 answers


If you mean "disable" like when changing the url eg. index.html

in #

, then we can do something like this:



// Detect different screens.
$(window).resize(function(
{
    // Detect the current screen width.
    var width = $(window).width();
    // Determine what you define a as a mobile screen size.
    var mobileScreen = 900;
    // Check whether the condition applies.
    if(width <= mobileScreen)
    {
        // Change every href attribute of every a element with #
        $('a').attr('href', '#');
        // You can also hide them, if you want, with
        // $('a').hide();
    }
    else
    {
        // Do nothing otherwise, 
        // or change the href attribute back to an actual url, using ids.
    }
}).resize(); // Trigger the re-size event on page load.
+1


source 


$('.photos a').click(function(event){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        event.preventDefault();
    }
});


Very simple jsFiddle to understand. Try it on mobile, tablet and desktop to see if it works as you intended.

+1


source 


This should get the work done:

<script type="text/javascript">
// get window width
var width = $(window).width();
// check if window width is smaller then 1024px (mobile or tablet
if(width < 1024) {
    // if yes then ...
    $("large-12.columns.photos a").click(function(e) {
        // this should prevent the clicking functionality
        e.preventDefault();
        // just to add some fun here
        alert('you are on mobile ... clicking doesnt work here');       
    });
}
</script>
0


source






More articles:


All Articles