Question

This might be a duplication of Custom Resizable Handles in JQuery UI, but that post talks about the handle not being a child element of the resizable element, and it doesn’t specify which version of jQuery UI.

The API states that custom handles can be defined as follows:

The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle.

In my code, the handle is a child element of the resizable element, and the jQuery is as follows:

$("#searchbar_container").resizable({ 
    handles: {w: '#searchbar_handle_top'},
    maxWidth: 445,
    minWidth: 20,
    start: function(event, ui) {},
    stop: function(event, ui) { 
        $("#searchbar_container").css('height', '');
    } 
});

I can get it to work with the legacy version of jQuery UI (1.8.24): link
…but not with the “stable” version of jQuery UI (1.9.0) and the exact same code: link . Both pages use the same version of jQuery core (1.8.2).

The stable version of jQuery UI produces the following console error:

Uncaught Error: Syntax error, unrecognized expression: , jquery-1.8.2.min.js:2

Does anyone think I’m doin’ it wrong?

Cheers

Answer 1

I ran into the same issue with jquery 1.9.0, resizable with args seems to be broken in the new release. Reverting back to a legacy release until it is fixed.