When resizing quickly, events don't fire for intermediate breakpoints #19

chrisforrette · 2015-03-13T19:00:44Z

I have breakpoints that look like:

{
  breakpoints: {
    small: {
      min: 480
    },
    medium: {
      min: 680
    },
    large: {
      min: 900
    },
    xlarge: {
      min: 1220
    }
  }
}

And, using the $(window).morlockBreakpoint(), and sizing quickly from small to xlarge, I would expect "enter" breakpoint events to fire for medium, large, and xlarge, but that doesn't happen.

The text was updated successfully, but these errors were encountered:

tdreyno · 2015-03-14T17:46:09Z

There is a throttle on the resize listener. Decreasing it to 0 would probably have the effect you want, at the cost of performance.

Alternatively, if you need the intermediate breakpoints you could:

var breaks = ['small', 'medium', 'large', 'xlarge'];

function enter(bp) {
  // do something
}

$(window).morlockBreakpoint({
  breakpoints: {
    small: {
      min: 480
    },
    medium: {
      min: 680
    },
    large: {
      min: 900
    },
    xlarge: {
      min: 1220
    }
  }
});

var currentBP;
$(window).on('morlockBreakpoint', function(e, b) {
  if (currentBP && (currentBP !== b)) {
    var cIdx = breaks.indexOf(currentBP);
    var nIdx = breaks.indexOf(b);
    var direction = nIdx > cIdx ? +1 : -1;

    var i = cIdx + direction;
    do {
      enter(breaks[i]);
    } while(i !== nIdx);
  }

  currentBP = b;
});

Or, maybe this is a bug, I'll check :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When resizing quickly, events don't fire for intermediate breakpoints #19

When resizing quickly, events don't fire for intermediate breakpoints #19

When resizing quickly, events don't fire for intermediate breakpoints #19

When resizing quickly, events don't fire for intermediate breakpoints #19

Comments