Show DIV on-hover on Desktop and on-click on Mobile

Question

I want to create a div that shows another div on hover on desktop but on-click on mobile.

Is this possible?

check this one out http://stackoverflow.com/questions/7715124/jquery-do-something-if-screen-width-is-less-than-960-px — Meow, Jan 16 '14 at 04:16
Thanks Sixin Li, But I want the function for when you click it the div will appear on mobile instead of the hover on desktop. — mark-in-motion, Jan 16 '14 at 05:13

score 5 · Answer 1 · answered Jan 16 '14 at 05:43

Following code may help you..

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
var isWindows = /windows phone/i.test(navigator.userAgent.toLowerCase());
var isBlackberry = /blackberry/i.test(navigator.userAgent.toLowerCase());
var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());

if(isAndroid || isWindows || isBlackberry || isiDevice){
    $('#element').on('click',function(){
         //your code here
    });
}else{
    $('#element').on('hover',function(){
         //your code here
    });
}

Or you can see the following post...

http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/

score 1 · Accepted Answer · edited Sep 13 '18 at 16:14

1

if screen size mobile{

  $("#element).click(some function)
}
else if screen size desktop{
  $("#element).hover(some function)
}

or the other way of workaround

$("#element").click(function(){
   if(screen size is mobile){
     //do something (show div)
   }
   else if(screen size is desktop){
     //do something
   }
});

$("#element").hover(function(){
   if(screen size is mobile){
     //do something 
   }
   else if(screen size is desktop){
     //do something (show div)
   }
});

edited Sep 13 '18 at 16:14

Pol Conin

188
1
10

answered Jan 16 '14 at 05:23

Meow

138
1
7

...and if I cannot base my distinction on the viewport width? – caneta Jan 05 '17 at 16:34

score 1 · Answer 3 · answered Jan 16 '14 at 06:27

combining Sixin and CSS TRICKS answer below:

if ($(window).width() < 960) {

  $("#element").click(function(){

        var e = document.getElementById("foo");
        if(e.style.display == 'block')
           e.style.display = 'none';
        else
           e.style.display = 'block';
  });
}
else {

  $("#element").hover(function(){

        var e = document.getElementById("foo");
        if(e.style.display == 'block')
           e.style.display = 'none';
        else
           e.style.display = 'block';

  });
}

Show DIV on-hover on Desktop and on-click on Mobile

3 Answers3

Linked