jQuery Forum

The resize event looks like what you are looking for. It returns

I looked through all of that information, and I did not see any indication in there that specifically states that it was equal to the grid without doing some math. I was expecting to find something like "snap" or "grid", but all it gives me is numbers. I assumed I could do

if (ui.originalElement.width() - ui.element.width % snap_width) {

}

But the two "widths" are always the same. I used a start to set the original width to a variable, and use that, but the "sizes" are always reported at what they appear, so every instance results in a difference of snap_width (which for my purposes is equal to 20).

I just cannot believe there is nothing in either event or ui that says "hey, the visible element changed". Seems like an important bit of information, but maybe I am just doing something out of the ordinary.

On the same page, it shows the grid option. http://api.jqueryui.com/resizable/#option-grid

JΛ̊KE

Yes, it does. It shows you how to set the grid option, and to see what that grid option is set to, but NOT how to tell when a trigger to the "resize" function caused a snap or not.

But all resizes snap to something. No?

JΛ̊KE

No, they do not. Every time the mouse moves the "resize" method is called. Even if you move up/down on a resize that only allows left/right.

There does not seem to be an event that triggers on each snap. Only resize (during resizing), and stop(at end of resizing). Do you want the stop event?

Stop fires when the person lets go of the handle, right? That's not what I need. I need to know every time the resize hits a grid increment so I can redraw some elements. I am using it as a "range" type selection on a table with multiple columns "all with colpan". Each time it hits a grid mark, I need to reduce (or increase) the colpan of the underlying table cell, and increase (or reduce) the adjoining table column. Resize may not be the best thing to use for this, so I am open to suggestions.

Resize plus a little math may be your only choice.

It is actually colspan, using a table (for tabular data) and I need the colspans to drag and drop, which doesn't seem possible. So I am using a DIV inside the column that is resizing. So, when the div changes size on the grid, to match the width of columns, the colspans need to change.

You will have to use resize events, then test for the size to know what has changed.

JΛ̊KE