When is the DOM fully rendered after a window.resi

Question

I'm using Bootstrap 3.2 and its media query strategy allows it to rewrite the DOM for various viewport sizes (in Bootstrap, these are lg, md, sm, and xs for large, medium, small, and extra-small viewports). But when I use Bootstrap or not, I need to make sure that the DOM is completely re-rendered after a browser-window resize before my JavaScript code runs.

Currently, I have a JavaScript function that fires as a result of a windows.resize event:

$(window).resize(function () {
   ActivateControls();
});

But this event sometimes fires before the DOM is fully re-rendered (it seems that Bootstrap processes the resize event asynchronously along with my own JS code--and that's not going to work--I need my code to run AFTER bootstrap fully re-renders the DOM in response to a resize).

Is there a callback event I can wire-up to so that I get notified once the DOM is fully updated by the browser-resize action?

Thank you.

Answer 1

Unless someone chimes in to the contrary, I think the answer is to use the same logic Bootstrap itself uses, which Shai pointed out--that is, use media queries in CSS rather than wait for Bootstrap to completely render the DOM after a resize event. Using media queries will let my special-case styling fire upon a viewport-size change rather than have to wait for Bootstrap.

I may post another question because I still think it might be useful to have a sort of $(document).ready() function that fires after a resize event versus after a postback. If anyone knows of anything like that, please let me know.

Thanks.