CODEWITHSUNDEEP
jquery
Abhay Desai
Abhay Desai

Reputation: 125

disable .hover() function for small screens jQuery

Can i please get some help with jQuery hover function. My problem is I m trying to have a slieUp and slideDown function called on the hover of the div but i want to disable this effect for smaller screen i.e when screen is re-sized. If i re-size the screen i need to refresh the page for the change to take place. Also tried to use the $(window).resize instead of $(document).ready but it wont work until i re-size the window

   $(document).ready(function() {

   if ($(window).width() > 990 ) {   
      $('.block_holder').hover(

       function(){
            $(this).find('.top_half').slideDown(450);
          },

          function(){
              $(this).find('.top_half').slideUp(450);
          }
  );
 } 

});

Upvotes: 1

Views: 2324

Answers (3)

Furquan Khan
Furquan Khan

Reputation: 1594

I would suggest you to bind the function on resize event:

window.onresize = function(event) {
...your code goes here...
}

Like this:

$(document).ready(function () {
window.onresize = function(event) {

  if ($(window).width() > 990 ) {   
  $('.block_holder').hover(
      function(){
        $(this).find('.top_half').slideDown(450);
       },

      function(){
          $(this).find('.top_half').slideUp(450);
      }
   );
  } 
}
}

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

I would rather suggest you writing the code that sets the dom in separate function. And then you can call it on every window.resize.

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

This way it is ensured that functionality of slideup/slidedown does not brake on window resize.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

Try a resize event handler like

 $(document).ready(function () {
     $(window).resize(function () {
         if ($(window).width() > 990) {
             $('.block_holder').on('mouseenter.large', function () {
                 $(this).find('.top_half').slideDown(450);
             }).on('mouseleave.large', function () {
                 $(this).find('.top_half').slideUp(450);
             });
         } else {
             $('.block_holder').off('mouseenter.large mouseleave.large');
         }
     }).resize(); //to initialize the value
 });

Demo: Fiddle

Upvotes: 2

Related Questions