10

enter image description here

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?)

sjs
  • 472
  • 1
  • 5
  • 15
  • *I want to do* ... show what you have tried ... – DaniP Jun 14 '16 at 17:09
  • @DaniP uh, I don't know where to start? everything I found was in jQuery, alternatively I found the way to add standard bottom right hand corner resize handle using css but that's not what I want. – sjs Jun 14 '16 at 17:15
  • 2
    I think that you can find the answer of this question [here](http://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript) – Dlanor Jun 14 '16 at 17:16
  • What you can do is add a container that provides those points as separate elements, and then bind the events you already know to each point. – DaniP Jun 14 '16 at 17:19
  • @DaniP Ok, What do you suggest to make the handles from? Are they drawn using pure css, an graphic or maybe a tiny div with a border? I guess they could be anything as long as I can attach the event to it. – sjs Jun 14 '16 at 17:27
  • 3
    It can be CSS .. https://jsfiddle.net/0sgun0dr/1/ – DaniP Jun 14 '16 at 17:34
  • How about a Canvas element? I would assume thet you could make it partially transparent and put it over the div. It might also be relatively browser agnostic. You have to realize that jQuery goes through a lot of work working with the quirks for each browser. When you want to do something like this, I would worry about major changes required for each browser release. – Bradley Ross Jun 14 '16 at 19:40
  • @BradleyRoss assume I'm working for nothing lower than IE11, and the latest FF and Chrome. Does that concern still apply? – sjs Jun 14 '16 at 20:03
  • When it comes to adoption of HTML5 capabilities, Firefox and Chrome have different schedules. There are also things in Javascript for which there is not necessarily a defined result. I found a number of cases where Chrome, Firefox, and Safari reacted to code differently. Internet Explorer is an anti pattern collection all by itself. I generally tried to stick to the items that would work on multiple browsers without browser dependent code. I like to work on the KISS principle. (Keep it simple, stupid.) When you go for the "cute", expect high maintenance. – Bradley Ross Jun 14 '16 at 20:46

1 Answers1

7

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:

Tony
  • 439
  • 11
  • 20
howtoweb
  • 349
  • 1
  • 3
  • 10