66

I have an absolute positioned side panel and I need to change its width by dragging this border. Also I need to change cursor on border hover. Is it possible to do this without adding another div for dragging?

Here is the markup:

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}
<body>
    <div id="right_panel"></div>
</body>

I don't need a full solution. A Yes (with documentation reference)/No answer is enough. I don't need an answer with a helper div. I already have one:

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);
#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

#resize {
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}
<body>
    <div id="right_panel">
        <div id="resize"></div>
    </div>
</body>

Again, this is the functionality I want, except I want to remove the extra div.

5
  • 3
    I assume you mean 'dragging'. Do you have ANY Javascript for this or are you asking us to write it for you?
    – Paulie_D
    Oct 7, 2014 at 9:50
  • atleast show some code which you have already tried and not worked
    – himanshu
    Oct 7, 2014 at 9:55
  • 2
    I'm asking is it possible or not and some recomendations. I don't need to solve this problem because I already have a solution with another div for dragging and resizing parent div. I only want to make the markup cleaner. Here is the solution with another div: jsfiddle.net/kxr96dzg/1 And sorry. English isn't my native language.
    – Anton
    Oct 7, 2014 at 10:27
  • I provided my code. Can you help now?
    – Anton
    Oct 7, 2014 at 12:53
  • 1
    @Anton In case you missed it, I added an answer that might work for you (a bit late but I hope it helps!) -- stackoverflow.com/a/53220241/428486
    – lucascaro
    Nov 10, 2018 at 8:00

4 Answers 4

109

It is certainly possible to do this without an extra div. Use css and ::after to create the border and change the cursor. Use MouseEvent.offsetX to determine whether to process a click in the element.

In your example, you want a click on the main div, but only on the first 4 pixels. You can do that by checking for e.offsetX < 4 in your click handler:

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);
#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel::after {
    content: '';
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}
<body>
    <div id="right_panel"></div>
</body>

3
  • 1
    How to limit the resize() to a certain % of the viewport?
    – ed1nh0
    Aug 19, 2019 at 17:44
  • 1
    This worked fine on Firefox for me, but on Chrome when the right panel became extremely narrow, it started going crazy - the panel would shrink faster than I moved the mouse over. It's because I was using flexbox and Chrome wasn't respecting flex-shrink: 0 all the time. To fix that, I changed the line that contains getComputedStyle to be: panel.style.width = (parseInt(panel.style.width) + dx) + 'px';.
    – Garrett
    Aug 22, 2019 at 4:13
  • One more thing, panel.style.width might not be a number (could be '' for example), so you should check for that and fallback to getComputedStyle as above. The first time the resize function is called, it will fall back to getComputedStyle, but all other times, it'll use panel.style.width.
    – Garrett
    Aug 31, 2019 at 20:17
30

i hope it may help you

http://jsfiddle.net/T4St6/82/

<div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
        <div id="drag"></div> right content!
    </div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;

}
 #left_panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: grey;
}

#right_panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    color:#fff;
    background: black;
}
 #drag {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

JQUERY

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left_panel'),
        right = $('#right_panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});
6
  • 1
    Thanks. It is a working solution but I'm trying to do this without a helper div for dragging.
    – Anton
    Oct 7, 2014 at 10:34
  • 7
    Add "return false" to the end of mousemove callback to prevent text selection in the divs. Nov 4, 2016 at 16:23
  • is this also doable in bootstrap?
    – PirateApp
    Nov 29, 2017 at 8:14
  • @PirateApp can you please explain, what you want to achieve? do you want to use bootstrap.css? Nov 29, 2017 at 9:29
  • 1
    @PirateApp yes it is possible, you need to find the proper css class of bootstrap, also mixture of classes. Nov 29, 2017 at 12:18
18

Without jQuery:

var isResizing = false;

(function() {
  var container = document.getElementById("container"),
    left = document.getElementById("left_panel"),
    right = document.getElementById("right_panel"),
    handle = document.getElementById("drag");

  handle.onmousedown = function(e) {
    isResizing = true;
  };

  document.onmousemove = function(e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) {
      return;
    }

    var offsetRight = container.clientWidth - (e.clientX - container.offsetLeft);

    left.style.right = offsetRight + "px";
    right.style.width = offsetRight + "px";
  }

  document.onmouseup = function(e) {
    // stop resizing
    isResizing = false;
  }
})();
body {
  font-family: Helvetica, Arial;
  font-size: 12px;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}

#left_panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 100px;
  background: grey;
}

#right_panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  color: #fff;
  background: black;
}

#drag {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}
<body>
  <div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
      <div id="drag"></div> right content!
    </div>
  </div>
</body>

0
6

2022 Answer:
This now can be done , by simple using "resize" property in css only,
make sure to make overflow auto for that div, so resize can work .

as in this snippet:

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
    resize: horizontal;
    overflow-x: auto;
  }

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.