How to remove Hover Effect from DIV when mobile device is detected using javascript

Question

I have using redirection-mobile.js for detecting the mobile device. The code for the same is as follows:

 if (screen.width < 574) {
       var ref = document.referrer;
       var urls = new Array("http://127.0.0.1/eflip","http://127.0.0.1/eflip");
       var n = ref.match(urls[0]);
       var m = ref.match(urls[1]);
       if ((m!==null) || (n!==null)) {
       stop;
       }
       else if (ref=='') {
       var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
       if (r==true) {

       }
        else {
        stop ;
       }
       }
       else
       {
       window.location = "http://127.0.0.1/eflip";
       }
      }

if (r==true) is the condition to detect the mobile device. Now I want to remove all the hover effects. I have tried $('element').removeClass(), but its not working.

Every Help and Comment will be highly appreciated. Thanks to all in advance :-)

On mobile devices, you don't have a `:hover` state, just an `:active` and `:focus` state. So I think it's not necessary to remove them. Have a look at this question http://stackoverflow.com/questions/23508598/css-hover-on-mobile-or-other-device-as-toggle — 23tux, May 19 '15 at 08:11
Hi @23tux thanks for your reply, so do you have any idea how to remove the focus and active using javascript?. Because the mousehover effect which I have on desktop view, I don't want it for mobile view. And that mousehover effect is fired when we focus on div in mobile device — Siddharth, May 19 '15 at 08:18

monxas · Answer 1 · 2015-05-19T08:56:13.643

1

you're talking about removing events or css effects? if css effects, the elegant way to go is via css, instead of removing the css already applied, just set the css :hover inside a media query like so:

@media (min-width: 480px) {
 /*css you want to apply only in desktop */
   a:hover{...}
}

Edit

min-device-width: 480px) {
 /*css you want to apply only in desktop */
   a:hover{...}
}

edited May 19 '15 at 08:56

answered May 19 '15 at 08:32

monxas

2,475
2
20
36

Hi @monxas Thanks for your reply. I want it to be done on mobile, when the mobile device is detected. – Siddharth May 19 '15 at 08:35
I meant moving previous code to "Desktop only" instead to apply it everywhere and then remove it on mobile. can you provide the code you're trying to stop from being executed? – monxas May 19 '15 at 08:42
When a user opens the webpage in mobile this code will be executed var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE."); if (r==true) { } if(r==true) Satisfies then I want to disable hover effects – Siddharth May 19 '15 at 08:44
I mean I want to see the hover effects you want to remove – monxas May 19 '15 at 08:46
Hi @monxas I got you. You are talking about the media query. The media query you posted will disable to hover effect even when I open the browser from desktop and resize it to 480px or less than that. I don't want it. I want it only when Mobile device is detected. – Siddharth May 19 '15 at 08:49

Radonirina Maminiaina · Answer 2 · 2015-05-19T08:36:49.540

0

You can use to Modernizr to detect the type of your browser.

if ( ! Modernizr.touch ) {
    // your desktop effect
}

edited May 19 '15 at 08:36

answered May 19 '15 at 08:14

Radonirina Maminiaina

6,958
4
33
60

thanks for your reply :-) but I have already detected the mobile device. Now what i want to do is want to remove all hover effects which I have applied for the desktop view. – Siddharth May 19 '15 at 08:19

score 0 · Answer 3 · edited May 19 '15 at 09:24

0

You should detect viewport using jQuery

jQuery :

    <script type="text/javascript">
    jQuery(document).ready(function(){

    var viewport = jQuery(window).innerWidth();

        if( viewport < 480 )
            {
            // for mobile device
               jQuery('#yourDiv').css({'transform', 'none !important'});
            }
    });
    </script>

edited May 19 '15 at 09:24

Community

1
1

answered May 19 '15 at 08:21

Faisal Alvi

532
4
22

Hi @Faisal Alvi $('#yourDiv').css({what to write here?}); I just tried jQuery('#yourDiv').css({transform: none}); and its not working – Siddharth May 19 '15 at 08:27
Try this: jQuery('#yourDiv').css('transform', 'none !important'});. You should read more about transform css here : [link](http://www.w3schools.com/cssref/css3_pr_transform.asp) – Faisal Alvi May 19 '15 at 08:45

How to remove Hover Effect from DIV when mobile device is detected using javascript

3 Answers3