CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Samuel
Samuel

Reputation: 6146

Wordpress: Disable part of Jquery function on mobile

I simply want to disable the below function on mobile. Here is a Pen. It works but when I resize my browser the hover effect doesn't work as desired (<img> hangs at the bottom of the h2 element. the desired effect is for the <img> to follow the mouse cursor).

jQuery

if ( jQuery(window).width() > 769) {
  jQuery(document).ready(function($){
      jQuery('.article__title').on('mouseenter mousemove', function(evt){
          jQuery(this).siblings('.article__img').css({left: evt.pageX+30, top: evt.pageY-200}).show();
          jQuery(this).on('mouseleave', function(){
              jQuery(this).siblings('.article__img').hide();
          });
      });
  });
}

Upvotes: 1

Views: 68

Answers (1)

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10163

If jQuery(window).width() > 769 is false then the code inside of it will never run. If it's true then it will. When you open the pen you'll most likely have a wide enough window. But that code runs once when the page loads and that's it. Resizing the window doesn't mean that code runs again, and even if it did you wouldn't want to call those functions multiple times.

What you need is to apply that condition inside jQuery('.article__title').on('mouseenter mousemove', function(evt){ so that it's checked every time you move the mouse.

Upvotes: 2

Related Questions