Switch Click And Hover Events Based On Width

I want to toggle events based on width. for mobile only click event should work. for desktop hover event should work. while page loading my code working properly when resize my cod

Solution 1:

Its very simple, 1st you cant write this much of code for every event. We have to come up with very simple solution, here is how it works

1st check the width of the Page in JS and assign Desktop/Mobile Class on body :

 function process(){ 
   if( $(window).width() > 600){
     $("body").removeClass("mobile").addClass("desktop");

   }else{
     $("body").removeClass("desktop").addClass("mobile");
   }

}
$(window).resize(function(){
    process()
});

Now, you have execute the command for hover and click:

     $(document).on('mouseover', 'body.mobile .popover-controls div',function(e){
            alert("hover");
        }); 

 $(document).on('click', 'body.desktop .popover-controls div',function(e){
            alert("click");
     console.log("click");
        }); 

I Hope this will work for you. :)

Check the Js fiddle Example: http://jsfiddle.net/asadalikanwal/xcj8p590/ I have just created for you, also i have modified my code

Solution 2:

You could use a JavaScript Media Query to determine the width of the screen as detailed here.

var mq = window.matchMedia( "(min-width: 500px)" );

The matches property returns true or false depending on the query result, e.g.

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

Solution 3:

First Detect the Mobiles/Tablets Touch Event:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
};

Then Try like this:

function eventFire() {
    var _element = $(".popover-controls div");

    // True in Touch Enabled Devices
    if( is_touch_device() ) { 
        _element.click(function(e) { .... });
    }
    else {
         // apply Hover Event
        _element.hover();
    }
}

No need to detect width of devices ;)

There is one more solution with third party and Most popular library is Modernizr

Solution 4:

This worked for me. It's a combination of the matchMedia() functionality @Ḟḹáḿíṅḡ Ⱬỏḿƀíé shared as well setTimeout() functionality @Jeff Lemay shared at TeamTreeHouse.com

The primary thing I contributed to was the use of the .unbind() functionality. It took me quite a while to figure out that this was necessary so the .hover() and .click() functions don't cross wires.

    //Add/remove classes, in nav to show/hide elements
    function navClassHandler(){
        if($(this).hasClass('active')){
            $('.dropdown').removeClass('active');
        }else{
            $('.dropdown').removeClass('active');
            $(this).addClass('active');
        }
    }

    function handleNav() {
        //instantanteous check to see if the document matches the media query.
        const mqM = window.matchMedia('(max-width: 1025px)');
        const mqD = window.matchMedia('(min-width: 1025px)');

        $('.dropdown').unbind(); //necessary to remove previous hover/click event handler
        if (mqM.matches) {
            console.log("Handling mobile");
            $('.dropdown').click(navClassHandler);
        } else {
            console.log("Handling desktop");
            $('.dropdown').hover(navClassHandler);
        }
    }

    // we set an empty variable here that will be used to clearTimeout
    let id;

    /* this tells the page to wait half a second before making any changes, 
    we call our handleNav function here but our actual actions/adjustments are in handleNav */
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(handleNav, 500);
    });

    //As soon as the document loads, run handleNav to set nav behavior
    $(document).ready(handleNav);