CODEWITHSUNDEEP
javascriptjquerycssresizesize
Kathy Judd
Kathy Judd

Reputation: 737

Resize text/div using mouse in javascript

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

enter image description here

Here is a link to the page:

Upvotes: 1

Views: 14431

Answers (4)

user2308890
user2308890

Reputation:

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

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

Upvotes: 1

jme11
jme11

Reputation: 17387

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 combine 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');
});

Upvotes: 5

user2346536
user2346536

Reputation: 1474

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

Upvotes: 0

Orelsanpls
Orelsanpls

Reputation: 23545

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 welcome

Upvotes: 2

Related Questions