0

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.

nikoshr
  • 32,926
  • 33
  • 91
  • 105
yekta
  • 3,363
  • 3
  • 35
  • 50

2 Answers2

1

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)

JayC
  • 7,053
  • 2
  • 25
  • 41
  • Yeah I was actually thinking of that this morning but tabled it in my mind because I didn't see a way to associate the hiding of the column via media queries to a Backbone Event. Perhaps that's the bigger question I should be asking. – yekta Aug 09 '12 at 16:01
  • Hm, per http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery I think I can make this work with that. Thanks! – yekta Aug 09 '12 at 16:06
  • Ooof, DOM Mutation events are depreciated, though, if you're going for the accepted answer. https://developer.mozilla.org/en-US/docs/DOM/Mutation_events – JayC Aug 09 '12 at 16:08
  • Oh, thanks for showing me that, that does change things. Though maybe I can fire events based off what is invisible and still in the Backbone Collection during the resize trigger? – yekta Aug 09 '12 at 16:44
0

Also take a look at Bootstrap by Twitter. I know this can handle changes based on the viewport size. Here's a question dealing with hiding divs based on the viewport size.

(For the record, I'm not an employee of Twitter nor was I otherwise enticed to suggest this.)

Community
  • 1
  • 1
j4w7
  • 121
  • 2
  • 5