remove class if mobile

Question

I am trying to remove a class on some a tags if its a mobile device to prevent a hover effect that is happening on touch making the anchors hard to use on devices. Not sure why this would not work, but alas its not working but does work on the li elements. Here is the structure and JS

HTML

<div class="slideRight">
                    <ul class="imageList imgListIntro">
                        <li><a href="img/res/golf/1-1.jpg"  data-lightbox="golf-1" data-title="Range" class="hvr-wobble-vertical"><img src="img/res/golf/1-1.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-2.jpg" data-lightbox="golf-1" data-title="Scorecard" class="hvr-wobble-vertical"><img src="img/res/golf/1-2.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-3.jpg" data-lightbox="golf-1" data-title="St. Andrews" class="hvr-wobble-vertical"><img src="img/res/golf/1-3.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-4.jpg" data-lightbox="golf-1" data-title="Challenge" class="hvr-wobble-vertical"><img src="img/res/golf/1-4.jpg" class="animateHidden"></a></li>
                    </ul>
                </div>

JS

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $('#toursButtons li').removeClass('hvr-wobble-vertical');
  $('#mainTourNav li').removeClass('hvr-wobble-vertical');
  $('.slideRight a').removeClass('hvr-wobble-vertical');
  $('#homeButtons li').removeClass('hvr-wobble-vertical');
}

I am with bruno on this one. You can check for screen width (media queries) in this case. However, if you wanna play it by mobile brower, i suggest you look at this: http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser — Dorvalla, Apr 07 '15 at 19:23
If I may suggest a less verbose version: http://jsfiddle.net/yfLwa8ou/ Any errors in the console? **Even shorter solution**: http://jsfiddle.net/s6dcn90j/ (check the css) — blex, Apr 07 '15 at 19:24
No errors. The class is removed on the `li` when I test on an iPad but not the removed on the `a`s . Not sure why that target wouldnt work. — Packy, Apr 07 '15 at 19:27

score 0 · Accepted Answer · answered Apr 07 '15 at 19:50

As Bruno mentioned in the comments media queries would more than likely be the most appropriate solution. However, if you must 'remove' a class and not just style it specifically for the smaller screen I would suggest something like this:

 $(window).bind('DOMContentLoaded load resize', function () {
  if ($(window).innerWidth() <= problemWidth) {
    $(element).removeClass('class');
  }
 });

Rough and untested but should give you the right idea.

Sam Jacobs · Answer 2 · 2015-04-07T20:23:39.177

0

When you add or remove a class you are applying and unapplying a collection of styles. If you use media queries to selectively apply styles at certain device widths, it is essentially the same thing as adding and removing a class.

.class {    

   @media (min-width:<<YOUR MOBILE BREAKPOINT>>) {
     /* apply hover styles here */
   }

   @media (max-width:<<YOUR MOBILE BREAKPOINT - 1>>) {
     /* apply mobile specific non-hover styles here */
   }
}

Apply the hover effects in the first media query. If you have mobile specific styling to replace the interaction on larger screens, put it in the second query. If you just don't want to apply the hover styles on mobile and add nothing, you do not need the second media query.

edited Apr 07 '15 at 20:23

answered Apr 07 '15 at 19:53

Sam Jacobs

346
1
8

Could you elaborate around your solution a bit? – Magnilex Apr 07 '15 at 20:11
The issue is I have to remove a class, not really restyle it. – Packy Apr 07 '15 at 20:12
@Packy If you don't have specific stlyes for the smaller size, don't add the second media query. The styles in the first chunk won't be applied at the smaller size and it's essentially the same as removing the class. – Sam Jacobs Apr 07 '15 at 20:15
@Magnilex happy to, what would you like me to elaborate on? – Sam Jacobs Apr 07 '15 at 20:16
@SamJacobs This answer appeared in a review queue because it was detected as a possible "low quality post". Just explain with a couple of sentences why your code solves the problem, that is always a good way to make sure the answer is of high wuality. – Magnilex Apr 07 '15 at 20:19
@Magnilex oh ok thanks! new to answering questions on SO – Sam Jacobs Apr 07 '15 at 20:21

remove class if mobile

2 Answers2

Linked