How to Make <Div> Resizeable

How to make resizable div, resizable from sides?

I adjusted the positioning and class titles to place the handles on the sides, then removed the scripting from each one that allowed both directions to be adjusted.

function makeResizableDiv(div) {  const element = document.querySelector(div);  const resizers = document.querySelectorAll(div + ' .resizer')  const minimum_size = 20;  let original_width = 0;  let original_height = 0;  let original_x = 0;  let original_y = 0;  let original_mouse_x = 0;  let original_mouse_y = 0;  for (let i = 0;i < resizers.length; i++) {    const currentResizer = resizers[i];    currentResizer.addEventListener('mousedown', function(e) {      e.preventDefault()      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));      original_x = element.getBoundingClientRect().left;      original_y = element.getBoundingClientRect().top;      original_mouse_x = e.pageX;      original_mouse_y = e.pageY;      window.addEventListener('mousemove', resize)      window.addEventListener('mouseup', stopResize)    })
    function resize(e) {      if (currentResizer.classList.contains('right')) {        const width = original_width + (e.pageX - original_mouse_x);                if (width > minimum_size) {          element.style.width = width + 'px'        }      }      else if (currentResizer.classList.contains('left')) {        const width = original_width - (e.pageX - original_mouse_x)        if (width > minimum_size) {          element.style.width = width + 'px'          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'        }      }      else if (currentResizer.classList.contains('top')) {                const height = original_height - (e.pageY - original_mouse_y)        if (height > minimum_size) {          element.style.height = height + 'px'          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'        }      }            else if (currentResizer.classList.contains('bottom'))       {        const height = original_height + (e.pageY - original_mouse_y)        if (height > minimum_size) {          element.style.height = height + 'px'        }              }    }
    function stopResize() {      window.removeEventListener('mousemove', resize)    }  }}
makeResizableDiv('.resizable')
body,html {  background: black;}.resizable {  background: white;  width: 100px;  height: 100px;  position: absolute;  top: 100px;  left: 100px;}
.resizable .resizers{  width: 100%;  height: 100%;  border: 3px solid #4286f4;  box-sizing: border-box;}
.resizable .resizers .resizer{  width: 10px;  height: 10px;  border-radius: 50%; /*magic to turn square into circle*/  background: white;  border: 3px solid #4286f4;  position: absolute;}
.resizer.top {  left: 50%;  top: -5px;  cursor: ns-resize;  transform: translate(-7px, 0px);}
.resizer.right {  right: -5px;  bottom: 50%;  cursor: ew-resize;  transform: translate(0px, 5px);}
.resizer.bottom {  left: 50%;  bottom: -5px;  cursor: ns-resize;  transform: translate(-7px, 0px);}
.resizer.left {  left: -5px;  bottom: 50%;  cursor: ew-resize;  transform: translate(0px, 5px);}
<div class='resizable'>  <div class='resizers'>    <div class='resizer top'></div>    <div class='resizer right'></div>    <div class='resizer bottom'></div>    <div class='resizer left'></div>  </div></div>

How do you allow a user to manually resize a div element vertically?

In your column flexbox you can use resize on one of the divs and adjust the other automatically using flex-grow set to one - the downside is that the slider is not very customizeable:

  • add resize: vertical to one of the flex items
  • add flex: 1 to the other flex item (so that this flex item will adjust automatically in response to the changing height of the other flex item as it is resized)

body {
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.block {
  height: 50%;
}

.block-1 {
  background-color: red;
  resize: vertical; /* resize vertical */
  overflow: auto; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}
<div class="outer">
  <div class="block block-1">
    Block 1
  </div>
  <div class="block block-2">
    Block 2
  </div>
</div>

How to make this resizable div, resizable from edges?

You cannot achieve this if you want to preserve the aspect ratio. So basically when you remove that option from the resizable, you can use the corners to drag on any direction as per your requirement and scale it across height and width.

$('.resizable').resizable({
    //aspectRatio: true, //comment or remove this
    handles: 'ne, se, sw, nw'
});

DEMO

How to make a resizable div from every angle?

It's interesting what a little bit of Google searching can do (: This is a working solution from Hưng Nguyễn https://codepen.io/ZeroX-DG

HTML

<div class='resizable'>
  <div class='resizers'>
    <div class='resizer top-left'></div>
    <div class='resizer top-right'></div>
    <div class='resizer bottom-left'></div>
    <div class='resizer bottom-right'></div>
  </div>
</div>

CSS

body,
html {
  background: black;
}
.resizable {
  background: white;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}

.resizable .resizers .resizer{
  width: 10px;
  height: 10px;
  border-radius: 50%; /*magic to turn square into circle*/
  background: white;
  border: 3px solid #4286f4;
  position: absolute;
}

.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

JS

function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = document.querySelectorAll(div + ' .resizer')
  const minimum_size = 20;
  let original_width = 0;
  let original_height = 0;
  let original_x = 0;
  let original_y = 0;
  let original_mouse_x = 0;
  let original_mouse_y = 0;
  for (let i = 0;i < resizers.length; i++) {
    const currentResizer = resizers[i];
    currentResizer.addEventListener('mousedown', function(e) {
      e.preventDefault()
      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
      original_x = element.getBoundingClientRect().left;
      original_y = element.getBoundingClientRect().top;
      original_mouse_x = e.pageX;
      original_mouse_y = e.pageY;
      window.addEventListener('mousemove', resize)
      window.addEventListener('mouseup', stopResize)
    })

    function resize(e) {
      if (currentResizer.classList.contains('bottom-right')) {
        const width = original_width + (e.pageX - original_mouse_x);
        const height = original_height + (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
        }
      }
      else if (currentResizer.classList.contains('bottom-left')) {
        const height = original_height + (e.pageY - original_mouse_y)
        const width = original_width - (e.pageX - original_mouse_x)
        if (height > minimum_size) {
          element.style.height = height + 'px'
        }
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
      }
      else if (currentResizer.classList.contains('top-right')) {
        const width = original_width + (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
      else {
        const width = original_width - (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
    }

    function stopResize() {
      window.removeEventListener('mousemove', resize)
    }
  }
}

makeResizableDiv('.resizable')

Source: https://codepen.io/ZeroX-DG/pen/vjdoYe

How to make HTML element resizable using pure Javascript?

I really recommend using some sort of library, but you asked for it, you get it:

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Demo

Remember that this may not run in all browsers (tested only in Firefox, definitely not working in IE <9).

How to make div element auto-resize maintaining aspect ratio?

The aspect-ratio ref property has a good support now so you can use the below:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}
<div class="stage">
  <p>Some text</p>
</div>

Related Topics

CSS to Align Label and Inputs on Form

How to Send HTML Email Using R

Youtube Video Header Background

How to Serve Up Images in Angular2

Streaming a Video from Google Drive Using HTML5 Video Tag

Removing Unwanted Table Cell Borders with CSS

HTML Code for an Apostrophe

How to Remove The Border Around an Image Without a Source

Table Overflowing Outside of Div

Aligning Text on a Specific Character

<Table> with Fixed <Thead> and Scrollable <Tbody>

<Table><Tbody> Scrollable

CSS Position Absolute and Full Width Problem

How to Specify The Order of CSS Classes

Why Is "&Reg" Being Rendered as "®" Without The Bounding Semicolon

How to Insert HTML Content in Xml Document

HTML5 File API Downloading File from Server and Saving It in Sandbox

Maintain Image Aspect Ratio in Carousel


Leave a reply



Submit