javascript - How to disable a href when media query detects specific browser size - Stack Overflow

admin管理员组

文章数量:1406720

I have a responsive grid with 20 images that when touched or clicked open a larger, full-sized corresponding image in a slideshow.

However:

I need to disable that link to the slideshow on mobile only (<=480).

Here is how it works:

<div class="box">
  <div class="boxInner">
    <a href="slideshow_illustration.html?er_col=0"/><img src="_assets/grid_illustration/geisha.jpg">
    <div class="titleBox">Geisha</div>
  </div>
</div>

Please know: I'm just a photographer/artist struggling to build a responsive personal site, so you will have to talk to me like I'm 10 years old.

Thanks in advance for any time and patience.

I have a responsive grid with 20 images that when touched or clicked open a larger, full-sized corresponding image in a slideshow.

However:

I need to disable that link to the slideshow on mobile only (<=480).

Here is how it works:

<div class="box">
  <div class="boxInner">
    <a href="slideshow_illustration.html?er_col=0"/><img src="_assets/grid_illustration/geisha.jpg">
    <div class="titleBox">Geisha</div>
  </div>
</div>

Please know: I'm just a photographer/artist struggling to build a responsive personal site, so you will have to talk to me like I'm 10 years old.

Thanks in advance for any time and patience.

• javascript
• jquery
• media-queries

Share Improve this question Follow asked Jul 9, 2013 at 2:51 Stickup ArtistStickup Artist 11911 gold badge22 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Depending on what you're trying to acplish, one way to do it without javascript is to use pointer-events. This basically disables clicking on the element.

@media only screen and (max-device-width: 480px) {
     .boxInner a {
        pointer-events: none;
    }
}

Include jquery in your site by including this in your page

<script src="//ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Then write a small script like this:

<script type="text/javascript">

$(document).ready( function() {
    if (screen.width <= 480) {
        $('.boxInner a').on('click', function (event) {
            event.preventDefault();
        });
    }
});

</script>

This should test if the screen is <= 480, and disable the links if it is.

本文标签： javascriptHow to disable a href when media query detects specific browser sizeStack Overflow