StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Not sure if you meant that you'd like to constrain the resize operation to a particular axis, or if you'd like to know what direction the resize actually occurred in.</p> <p>RaYell's answer works if you wanted to former. I'll discuss the latter.</p> <p>If you set up a resizable like this:</p> <pre><code>var r = $("#resizable"); r.resizable(); </code></pre> <p>Let's say you'd like to know what direction the resize occurred in <em>after</em> the user releases the mouse button. Let's bind a function to the resize stop event:</p> <pre><code>r.bind('resizestop', function(event, ui) { // determine resize deltas var delta_x = ui.size.width - ui.originalSize.width; var delta_y = ui.size.height - ui.originalSize.height; } </code></pre> <p>Using the passed ui object, we can determine the relative change in size by subtracting the new size from the old size. After that, you can use <code>delta_x</code> and <code>delta_y</code> however you wish. Let's build a string that corresponds to one of the handles.</p> <pre><code>r.bind('resizestop', function(event, ui) { // determine resize deltas var delta_x = ui.size.width - ui.originalSize.width; var delta_y = ui.size.height - ui.originalSize.height; // build direction string var dir = ''; if (delta_y > 0) { dir += 's'; } else if (delta_y < 0) { dir += 'n'; } if (delta_x > 0) { dir += 'e'; } else if (delta_x < 0) { dir += 'w'; } // do something with this string alert(dir); }); </code></pre> <p>Note that this will not necessarily return which handle was actually used to perform the resize if you have handles on both sides of the element, only it's net direction.</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