StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use <a href="http://api.jquery.com/resize/" rel="noreferrer"><code>.resize()</code></a> to get every time the width/height actually changes, like this:</p> <pre><code>$(window).resize(function() { //resize just happened, pixels changed }); </code></pre> <p><a href="http://jsfiddle.net/UqYCr/" rel="noreferrer">You can view a working demo here</a>, it takes the new height/width values and updates them in the page for you to see. Remember the event doesn't really <em>start</em> or <em>end</em>, it just "happens" when a resize occurs...there's nothing to say another one won't happen.</p> <hr> <p><strong>Edit:</strong> By comments it seems you want something like a "on-end" event, the solution you found does this, with a few exceptions (you can't distinguish between a mouse-up and a pause in a cross-browser way, the same for an <em>end</em> vs a <em>pause</em>). You can <em>create</em> that event though, to make it a bit cleaner, like this:</p> <pre><code>$(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); </code></pre> <p>You could have this is a base file somewhere, whatever you want to do...then you can bind to that new <code>resizeEnd</code> event you're triggering, like this:</p> <pre><code>$(window).bind('resizeEnd', function() { //do something, window hasn't changed size in 500ms }); </code></pre> <p><a href="http://jsfiddle.net/UqYCr/1/" rel="noreferrer">You can see a working demo of this approach here</a> </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload