CODEWITHSUNDEEP
javascriptjqueryevent-handling
SausageBuscuit
SausageBuscuit

Reputation: 1296

Firing multiple Events on JQuery Resize

I have been using the JQuery Code below to handle a little bit of responsiveness for a menu on a Drupal site. In the two commented lines in the resize function, I am essentially trying to enable and disable the opposite events dependent on the screen size. My first question would be since this handler triggering would be in the resize function, would it cause any kind of significant performance hit to attempt something like this? My second question would be how? I've been trying to use the on and off functions to enable/disable those handlers as needed, but I don't think I'm getting the overall syntax correct. I figure it would be best to break the existing event handlers into functions, but have left them as is for the code example.

jQuery(document).ready(function($) {
  $('.nav-toggle').click(function() {
   $('#main-menu div ul:first-child').slideToggle(250);
   return false;
});

if( ($(window).width() > 600) || ($(document).width() > 600) ) {
  $('#main-menu li').mouseenter(function() {
    $(this).children('ul').css('display', 'none').stop(true, 
    true).slideToggle(1).css('display', 
    'block').children('ul').css('display', 'none');
  });

  $('#main-menu li').mouseleave(function() {
    $(this).children('ul').stop(true, true).fadeOut(1).css('display', 'block');
  })
    } 

else {
$('.drop-down-toggle').click(function() {
  $(this).parent().children('ul').slideToggle(500);
});
}

 $(window).resize(function() {
 if($(window).width() > 600) {
    $('div.menu-navigation-container ul.menu').css('display','block');
    $('div.menu-navigation-container ul.menu ul.menu').hide();
    //**Disable dropdown click and enable mouse enter and mouse leave**
 }
 else{
    $('div.menu-navigation-container ul.menu').hide();
    //**Disable mouse enter and mouse leave but enable dropdown click**
 }
});

});

Upvotes: 0

Views: 704

Answers (2)

lshettyl
lshettyl

Reputation: 8181

As I said, move your event binding outside of the resize function as binding event handlers within resize/scroll is not a good idea at all as you'd bind the same event over and over for every pixel resized!.

An example would look like this:

$(document) // or you can even use 'div.menu-navigation-container' as opposed to document
.on("click", ".click", function() {})
.on("mouseenter", ".hover", function() {})
.on("mouseleave", ".hover", function() {});

$(window).resize(function() {
    //A bit of breathing time when the resize event pauses. Remember, the statements within the resize will trigger for every pixel resize, otherwise.
    setTimeout(function() {
        if( $(window).width() > 600 ) {
            $('div.menu-navigation-container ul.menu').css('display','block');
            $('div.menu-navigation-container ul.menu ul.menu').hide();
            //I am assuming your selector on which the events are bound to be '.menu-trigger' as you did not post any HTML. Replace this with the appropriate selector.
            $(".menu-trigger").removeClass("click").addClass("hover");
        }
        else{
            $('div.menu-navigation-container ul.menu').hide();
            //I am assuming your selector on which the events are bound to be '.menu-trigger' as you did not post any HTML. Replace this with the appropriate selector.
            $(".menu-trigger").removeClass("hover").addClass("click");
        }
    }, 250);
});

Hope that helps.

Upvotes: 1

plondon
plondon

Reputation: 492

Use a throttle function

function throttle (callback, limit) {
    var wait = false;                 // Initially, we're not waiting
    return function () {              // We return a throttled function
        if (!wait) {                  // If we're not waiting
            callback.call();          // Execute users function
            wait = true;              // Prevent future invocations
            setTimeout(function () {  // After a period of time
                wait = false;         // And allow future invocations
            }, limit);
        }
    }
}

$(window).on('resize', throttle(yourResizeFunction, 200))

Read why here: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Upvotes: 1

Related Questions