Breaking News: Grepper is joining You.com. Read the official announcement!

how to make a div resizable

YOU.com answered on September 12, 2023 Popularity 8/10 Helpfulness 5/10

answer how to make a div resizable

related how to make resizable div in html

how to make a div resizable

Comment

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS to style the resizable div */
    .resizable {
      width: 200px;
      height: 200px;
      resize: both;
      overflow: auto;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  
  <div class="resizable" id="myDiv">
    Resize this div
  </div>

  <script>
    // JavaScript to implement resizing functionality
    const resizableDiv = document.getElementById('myDiv');
      
    resizableDiv.addEventListener('mousedown', initResize, false);
  
    function initResize(e) {
      window.addEventListener('mousemove', resizeDiv, false);
      window.addEventListener('mouseup', stopResize, false);
  
      let prevX = e.clientX;
      let prevY = e.clientY;
  
      function resizeDiv(e) {
        const width = resizableDiv.offsetWidth + (e.clientX - prevX);
        const height = resizableDiv.offsetHeight + (e.clientY - prevY);
  
        resizableDiv.style.width = width + 'px';
        resizableDiv.style.height = height + 'px';
  
        prevX = e.clientX;
        prevY = e.clientY;
      }
  
      function stopResize() {
        window.removeEventListener('mousemove', resizeDiv, false);
      }
    }
  </script>
</body>
</html>

Popularity 8/10 Helpfulness 5/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

how to make resizable div in html

Comment

let root = document.documentElement;
        let spliter = document.querySelector('.spliter-div');
        let rowDiv = document.querySelector('.row-divs');
        let cd1 = document.getElementById('cd-1');
        var isDown = false;
        var isHover = false;
        var minWidth = 127;
        var maxWidth = 600;

        function setPosition() {
            var cl = this.document.querySelector('.col-div');
            if (cl) {
                root.style.setProperty('--m-x', (cl.offsetWidth + 3.5) + 'px');
            }
            minWidth = (parseInt(rowDiv.clientWidth / 10) * 2) + 22;
            maxWidth = parseInt(rowDiv.clientWidth - minWidth);
        }
        function moveTo(e) {
            if (e.clientX > minWidth && e.clientX < maxWidth) {
                if (cd1.classList.contains('col-div-flex')) {
                    cd1.classList.remove('col-div-flex');
                }
                cd1.style.width = e.clientX  + 'px';
                root.style.setProperty('--m-x', (e.clientX + 9.5) + 'px');
            }
        }
        window.addEventListener('DOMContentLoaded', function (e) {
            setPosition();
        });
        window.addEventListener('resize', function (e) {
            setPosition();
        });
        root.addEventListener('mousedown', function (e) {
            if (isHover) {
                isDown = true;
            }
        }, true);
        document.addEventListener('mouseup', function (e) {
            isDown = false;
            if (isHover) {
                //...
            }
        }, true);
        document.addEventListener('mousemove', function (e) {
            if (isDown) {
                moveTo(e);
            }
        });
        spliter.addEventListener('mouseenter', function (e) {
            isHover = true;
            spliter.style.cursor = 'col-resize';
        });
        spliter.addEventListener('mouseout', function (e) {
            isHover = false;
        });

Popularity 3/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: resizable html

Link to this answer
Share Copy Link

Contributed on Apr 04 2024

Clever Cowfish

0 Answers Avg Quality 2/10

how to make a div resizable

Contents

More Related Answers

how to make a div resizable

Closely Related Answers

how to make resizable div in html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.