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/

isherwood · Accepted Answer · 2015-02-15T17:52:42.733

0

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

edited Feb 15 '15 at 17:52

answered Feb 15 '15 at 17:45

isherwood

58,414
16
114
157

Answer updated to use class selectors for reusability. – isherwood Feb 15 '15 at 17:56
I will have to play around with this a bit more, but this looks like the way to go. Changing the cursor to ew-resize and doing doing a few other tweaks should resolve the issue I having, tnx. – Chris6657456456 Feb 15 '15 at 18:23

score 0 · Answer 2 · answered Feb 15 '15 at 17:49

0

You can adjust resize-handle position inside the div with

.ui-resizable-se {
    /* Adjust resize-handle */
    right: 5px;
    bottom: -2px; 
}

JSFiddle: https://jsfiddle.net/ht5zdmx0/

answered Feb 15 '15 at 17:49

pabn1

1
3

That moves the little 'resize' icon, but I want to eventually get rid of that. I only want the user to resize by using the right edge of the DIV. – Chris6657456456 Feb 15 '15 at 18:16

score 0 · Answer 3 · answered Feb 15 '15 at 17:53

0

You could wrap the contents in another div like this: jsFiddle

<div id="jobDisplay">
  <div class="wrap">
   <span>hey dfgdfgdfg dfg </span><br />
   <span>hey2 dfgdfgdfgdfg</span><br />
   <span>hey3 sdfsdfsdf</span><br />
  </div>
</div>

answered Feb 15 '15 at 17:53

Jackson

3,476
1
19
29

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

3 Answers3