-2

Is it possible to make a div resizable in javascript without using jquery or any other external library?

I have been looking for this answer for quite some time now , I have also gone through this example as well:

How to make HTML element resizable using pure javascript? but the problem is it is not consistent , i.e., what I mean the resizing effect is not same as that of any of achieving the same task using any external library or even with the jquery ui library .

Edit:

One more feature,there would be a small rectangle shaped to drag the image on all the four sides because with the above example if the image has the property to be moved around and draggable at the same time, a single mouse click on the image would be confusing for the user which lets the image to be both moved and dragged at the same time.

Is there any solution for this?

Community
  • 1
  • 1
Jquery Developer
  • 279
  • 1
  • 4
  • 15
  • What do you mean it is "not the same" and "not consistent"? Are you wanting a resizing effect that doesn't get smaller than the original...or stays constrained to a certain ratio based on the original width/height? The scope is way too broad. – codyogden Jun 07 '15 at 07:14
  • 4
    Anything that can be done with jQuery and external libraries can be done in plain javascript (after all... jQuery is written in JavaScript). – Dan Goodspeed Jun 07 '15 at 07:15

2 Answers2

1

As far as making a div resizable with JavaScript, does this work for you?

This assigns new values to the style.height and style.width properties.

You can see it in action here: http://jsfiddle.net/w015gohf/

You can also use CSS resize to resize the div by dragging it by the corner.

shmuli
  • 5,086
  • 4
  • 32
  • 64
1

Use CSS resize:

div {
    padding: 1em;
    background-color: #eee;
    overflow: hidden;
    resize: both;
    display: inline-block;
}
<div>hi</div>
coma
  • 16,429
  • 4
  • 51
  • 76