Search code examples
javascriptjqueryresizablejquery-ui-resizable

jquery resizable() not working (with example)

Please see this work in progress:

http://rawgit.com/jfix/cover-image-position/master/index.html

My goal is to allow drag and drop from the desktop onto this page, and following that to drag the image around as well as to resize it. You should be able to drop an image onto the page and to drag it around.

However, what doesn't work is the resizing of the image. There is no handle displayed at the frame around the image and it's impossible to resize it. No errors in the console.

The relevant code is here:

hdl.resizable({
    aspectRatio: true,
    autoHide: true,
    alsoResize: "#coverimage",
    handles: 'all',
    resize: function(event, ui) {
    cvr
        .css('left', ui.position.left)
        .css('top', ui.position.top);
    }
});

where hdl is a short form for the $('#handler') in the assets/script.js file. I should note that this has been copied almost verbatim from this jsfiddle: http://jsfiddle.net/nL5ew/ where it works fine, obviously.

I can't seem to find the problem with my code. Thank you for any eagle-eyed insights you may have.

Solution

  • Having inspected @RRR's JSFiddle, and comparing it line by line with my code, I ended up discovering that I was not including one, as it turns out, vital CSS file from the JQuery UI suite. This is the line that was missing:

    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

    In all fairness the correct solution was provided by @RRR, unfortunately not in a full-blown answer but just in a comment.