Menu
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.
289
Using inline-block property: Use display: inline-block property to set a div size according to its content.
It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none.
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>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; }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With