How to create handles on each side of a div for resizing? - (NO jquery)

Question

Using pure javascript HTML5 and CSS3 (NOT jQuery)

I want to do something like this image, I have HTML elements inside the div, like for example a text area or text box, when user clicks on the container div I want the handles and border to show up. THe user should resize the container only using the handles.

How can I accomplish this? I know how to do the events and resize, but not sure how to specifically create the handles and resize only on those points.

Are the handles a CSS trick? or do I have to create a graphic for the container (like a background image on the resizable div container?)

Answer 1

First you can use CSS like this:

div {
    resize: both;
    overflow: auto;
}

(http://www.w3schools.com/cssref/css3_pr_resize.asp);

At this post was a good Javascript example: (How to make HTML element resizable using pure Javascript?)

JS Example:

• https://github.com/anhr/resizer