Responsive breakpoint issue about jquery-match-height HOT 9 CLOSED

If I use plugin in basic way: $('.block').matchHeight('.row-blocks'); everything works well, but window freezes/lags during resizing.

Can you confirm this gives the correct result?
If that does work, I think the real problem here is the freeze / lag during resizing?

If this is the case, I can add an option to limit the update rate to prevent this.

from jquery-match-height.

Thanks for reply. :)
There is problem with $('.block').matchHeight('.row-blocks'); in some case, but I didn't mention this before because I'm not sure if this is a fault of your plugin.
In some places there are responsive tabs (https://github.com/petelove666/Responsive-Tabs), which contain responsive carousels (http://www.owlgraphic.com/owlcarousel/) with equal height blocks (graphic designer had a lot of fun designing it :/). When page is launched first time (not cached), somethimes when tab is closed and then is opened, blocks have height 0px (maybe because they have property display: none?). But when I resize window, script works for this tab and divs has equal height but always - the rest of blocks in hidden tabs has no height again. If I use script with 'apply' and 'update' methods, there is no problem (except switching desktop/mobile view and vice versa what I've posted above). I handle tabs issue this way that on each click tab event 'update' method is called and everything looks OK.

Anyway, limit update rate could be a nice feature. :)

$(window).load(function () {
// other stuff
$('.block').matchHeight('.row-blocks');
RESPONSIVEUI.responsiveTabs();

$('.responsive-tabs li, .responsive-tabs h2').click(function () { 
    $.fn.matchHeight._update();
});

});

from jquery-match-height.

You need to apply matchHeight before you apply anything else like tabs that may hide your content because the height will become 0. matchHeight can't work on content that is hidden.

Then if things are changing size dynamically that's not based on resize event, you then need to manually call $.fn.matchHeight._update after the change (you may also need to temporarily disable the hiding that the tabs plugin is using and apply it after update).

I'll look into doing an option to limit the rate

from jquery-match-height.

OK, thanks for advice. I'll figure sth out.

from jquery-match-height.

I've added a throttle method in 6d9a6a7

Can you grab a copy of the latest build and confirm if this solves your issue so I can close this?

You can change the throttle like so:

$.fn.matchHeight._throttle = 80;

By default, the _update method is throttled to execute at a maximum rate of once every 80ms.
Decreasing the above _throttle property will update your layout quicker, appearing smoother during resize, at the expense of performance.
If you experience lagging or freezing during resize, you should increase the _throttle property.

from jquery-match-height.

Sure, I'll test it tomorrow at work :) . I've decided to use your script only with $('.block').matchHeight('.row-blocks'); because it works well for all blocks. Does $.fn.matchHeight._throttle = 80; work with .matchHeight() too or only with _update method?

from jquery-match-height.

Yep, the throttle is on by default now when using $.matchHeight()

from jquery-match-height.

Windows resize much faster. Thank you for your plugin and support :) .

from jquery-match-height.

Awesome, thanks

from jquery-match-height.