I have a client side app I’m working in which Im’ using jQuery 1.7.x, Backbone and Underscore. The app has many columns and as the window is resized I need to adjust the DOM to push or pop a column. I’m running into an issue of how to manipulate the DOM reliably on the window resize, given that events take time to fire, the event stack takes time to clear and that the DOM’s column count needs to be considered. Oh and I am using the helpful underscore debounce method with my resize listener and the defer method for these particular events which need to fire.
On a window resize I need to pop columns if they don’t fit horizontally. In the case where the window was shrunk faster than the resize listener fired I need to do some dom cleanup in order for everything to fit.
-
Is it better to loop through the columns on the DOM on each resize trigger and calculate the fit_width inside a loop of the current DOM columns and pop if necessary? Might a new resize event change/interrupt things?
-
Or is it better to fire the pop_column_if_too_wide on each resize trigger for the number of columns on the DOM?
this seems bad…
Handling everything through event triggers would be nice but the _.defer which I depend on isn’t reliable enough for a fast calculation on a current loop’s iteration since the event stack may have not yet been cleared. Hence it might end up firing the event for the same module twice.
Perhaps there’s even a better way.
Do they really need to be removed from the dom? Can’t you just hide them? That, IIRC, can be done purely through css and media queries… (of course you’ve got that condition “if the column is too wide” which might be tricky if taken very strictly)