I made a pure JS resizeable element, but the resizing element is not smooth. How do I make this more smooth?

Question

So, I made this thing where half of the element is resizable and which exposes the parent element and you can see the background-image of the parent element. Everything else seems to work fine except that the resizing is not smooth enough. After first time resizing, it just starts to stick and not perform well.

Link: https://jsfiddle.net/mcquintrix/u0Ljnttg/2/

 var links = document.getElementById("imageLinks"); links.onmousedown = function(e) { var theSrc = e.target.dataset.src; if (theSrc) { str = "url(\\"" + theSrc + "\\");"; //Sorry for using this: document.getElementById("imageBack").setAttribute("style", "background-image:" + str) } } var resizer = document.getElementById("content-resize"); resizer.onmousedown = resizableStart; function resizableStart(e) { var elem = document.getElementById("content"); elem.originalW = elem.clientWidth; this.onmousemove = resizableCheck; this.onmouseup = this.onmouseout = resizableEnd; } function resizableCheck(e) { var elem = document.getElementById("content"); if (elem.clientWidth === elem.originalW) { elem.originalX = e.clientX; this.onmousemove = resizableMove; } } function resizableMove(e) { var elem = document.getElementById("content"); var newW = elem.originalW - e.clientX + elem.originalX; if (newW < elem.originalW) { elem.style.width = newW + 'px'; } } function resizableEnd() { this.onmousemove = this.onmouseout = this.onmouseup = null; } 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class='container'> <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')"> <div class='content' id="content"> <div id="imageLinks"> <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a> <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a> <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a> <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a> </div> <span id="content-resize"></span> </div> </div> </div> 

Answer 1

I haven't played with this much, so I am sure there are some unnoticed issues, but it offers some improvement while doing what I think you are describing. Addresses @ScottFanetti comments. Written in ES6. Hopefully it may help you to continue experimenting, or give someone else a starting point.

 const content = document.getElementById('content'); const startW = content.clientWidth; const imageBack = document.getElementById('imageBack'); let resizable; let originalW; let originalX; document.getElementById('content-resize').addEventListener('dragstart', (e) => e.preventDefault(), false); document.addEventListener('mousedown', (e) => { resizable = e.target.id === 'content-resize'; if (resizable) { originalW = content.clientWidth; originalX = e.clientX; } else if (e.target.tagName === 'A' && e.target.dataset.src) { imageBack.style.backgroundImage = `url(${e.target.dataset.src})`; } }, false); document.addEventListener('mouseup', () => resizable = false, false); document.addEventListener('mouseenter', (e) => resizable = imageBack.contains(e.target), false); document.addEventListener('mousemove', (e) => { if (resizable) { content.style.width = `${Math.min(originalW - e.clientX + originalX, startW)}px`; } }, false); 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class="container"> <div class="images" id="imageBack" style="background-image: url(//data.whicdn.com/images/20948152/large.png)"> <div class="content" id="content"> <div id="imageLinks"> <a href="#" data-src="//ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg">1</a> <a href="#" data-src="//i.imgur.com/NhDejjN.jpg">2</a> <a href="#" data-src="//s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg">3</a> <a href="#" data-src="//data.whicdn.com/images/20948152/large.png">4</a> </div> <span id="content-resize"></span> </div> </div> </div> 

Answer 2

@Harshal Carpenter, here's my snippet:

What I've done to your code is that:

1.Remove these lines, which prevents the image to become smaller after the resize it to larger previously.

if (newW < elem.originalW) {
   elem.style.width = newW + 'px';
}

2. Remove the this.onmouseout to prevent resizing stop when you leave your mouse from that circular handle. You might want to continue resizing because your mouse might move to fast before the circular knob do, which end up your mouse cursor exiting the circular knob.

3. attach the mouse event listener to the div#imageBack instead of the div#content-resize , the same reason as above, you might want it to continue dragging even if the mouse leaves the div#content-resize .

 var links = document.getElementById("imageLinks"); links.onmousedown = function(e) { var theSrc = e.target.dataset.src; if (theSrc) { str = "url(\\"" + theSrc + "\\");"; //Sorry for using this: document.getElementById("imageBack").setAttribute("style", "background-image:" + str) } } var container = document.getElementById("imageBack"); var resizer = document.getElementById("content-resize"); container.onmousedown = resizableStart; function resizableStart(e) { if(e.target == resizer){ var elem = document.getElementById("content"); elem.originalW = elem.clientWidth; this.onmousemove = resizableCheck; this.onmouseup = resizableEnd; } } function resizableCheck(e) { var elem = document.getElementById("content"); if (elem.clientWidth === elem.originalW) { elem.originalX = e.clientX; this.onmousemove = resizableMove; } } function resizableMove(e) { var elem = document.getElementById("content"); var newW = elem.originalW - e.clientX + elem.originalX; elem.style.width = newW + 'px'; } function resizableEnd() { this.onmousemove = this.onmouseout = this.onmouseup = null; } 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class='container'> <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')"> <div class='content' id="content"> <div id="imageLinks"> <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a> <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a> <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a> <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a> </div> <span id="content-resize"></span> </div> </div> </div>