Image border on the right of div to watch jquery 'selection'

Question

I have a div that is using jquery resize.

$( "#jobDisplay" ).resizable({ })

That div also has an image at the right of it for a border.

The problem: The jquery resize method only allows you to resize the div on the very edge of the div, while my border is inside the div (I am using Background-image). How can I align my image border and this jquery resize closer (by either moving the resize trigger on jquery a few pixels to the left, or moving the div border a few more pixels to the right)

Example:http://jsfiddle.net/bo6xwc28/

Also, on my code if I try to reswize the div left/right I got 7 pixels to grab onto the div to move it, but in the jsfiddle I got only 2? Not sure why that is happening, but id love to be able to edit that value too (example: make it 10 pixels so users can select it easier).

Whatever the solution is, it needs to be as cross browser compatible as possible.

edit: In other words, right now it resizes at the red line (top image) I want it to resize on the bottom line: http://postimg.org/image/dslgqsiul/

Answer 1

According to the docs it's pretty easy to add a handle element. I'd do it like so:

#jobDisplay {
    ...
    position: relative;
}
.ui-resizable-handle-e {
    position: absolute;
    width: 25px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

<div id="jobDisplay">
    <div class="ui-resizable-handle ui-resizable-handle-e"></div>
    ...

$("#jobDisplay").resizable({
    stop: function (event, ui) {},
    handles: {
        "e": ".ui-resizable-handle-e"
    }
});

Demo