I'm looking to create a very simple way to allow users to be able to resize text. I want a box around a word or paragraph with handles that will allow the user to resize the box. Then the text inside the box auto resize to fit the new box.

How can I create the handles similar to the screen below?

The only example I can find is on VistaPrints web site.

Screenshot

Here is a link to the page:

I'm looking to create a very simple way to allow users to be able to resize text. I want a box around a word or paragraph with handles that will allow the user to resize the box. Then the text inside the box auto resize to fit the new box.

How can I create the handles similar to the screen below?

The only example I can find is on VistaPrints web site.

Screenshot

Here is a link to the page:

• javascript
• jquery
• css
• resize
• size

• In what part exactly you got stuck? HTML, CSS, JavaScript... How far you got with your attempt? Show us your code and you will get help – ilyes kooli Commented Aug 28, 2014 at 7:11
• What stops you from opening Inspector in your browser and looking how it's actually made on the page you're showing here? – Alex Salauyou Commented Aug 28, 2014 at 7:18

4 Answers 4

If you're looking for something "simple", then I would try jQuery UI. It offers both resizable and draggable widgets.

DEMO

Here's a sample of how you can bine the two and use some custom CSS to get the behavior you want. Adding contenteditable="true" will allow users to edit the contents as well, but you'll need some additional javascript to remove the 'draggable' while editing.

HTML:

<div class='resizable draggable'>
    <h1 contenteditable="true">Resize Me</h1>
    <div class="ui-resizable-handle ui-resizable-nw"></div>
    <div class="ui-resizable-handle ui-resizable-ne"></div>
    <div class="ui-resizable-handle ui-resizable-sw"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
</div>

CSS:

.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #000000;
    position: relative;
}
.ui-resizable-nw, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-se, .ui-resizable-n, .ui-resizable-e, .ui-resizable-s, .ui-resizable-w {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}

JS:

$('.resizable').resizable({
    handles: {
        'nw': '.ui-resizable-nw',
        'ne': '.ui-resizable-ne',
        'sw': '.ui-resizable-sw',
        'se': '.ui-resizable-se',
        'n': '.ui-resizable-n',
        'e': '.ui-resizable-e',
        's': '.ui-resizable-s',
        'w': '.ui-resizable-w'
    }
});
$( '.draggable' ).draggable().on('click', function(){
    if ( $(this).is('.ui-draggable-dragging') ) {
        return;
    }
    $(this).draggable( 'option', 'disabled', true );
    $(this).prop('contenteditable','true');
})
.on('blur', function(){
    $(this).draggable( 'option', 'disabled', false);
    $(this).prop('contenteditable','false');
});

I am giving you an algorithm:

Create a div and set a border (Big div) -> Place it using position: absolute;

Create 8 div (little square) -> Place them using position: absolute;

Use events mousedown, mouseup, mouseenter, mousemove and mouseleave to the 8 div

• When the mouseenter is fired, set boolean var.

• When the mousedown is fired, if mouseenter is equals to true, set mousemove.

• When mousemove is fired, move your little div which is hovered. Dynamically change big div size and position of the 8 div.

• When mouseup is fired, disable mousemove.

• When mouseleave is fired, set boolean false.

Gl doing it, if you get any problem during the implementation, you are wele

You can start with using jquery's resizable ui http://jqueryui./resizable/.

If you want to have the text auto sized to fit the container then use slabText http://freqdec.github.io/slabText/

Jquery UI would probably do it for you: http://jqueryui./resizable/