Adjust jQuery UI's resize functionality to maintain the current total width

Question

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width).

<div class="container left"></div>
<div id="resizeBar"></div>
<div class="container right"></div>

https://i.sstatic.net/tyrVs.png

To set them up, this is how I initialize:

function initUI () {
    $('.container').resizable({handles: 'e,w'});
    $('#resizeBar').draggable({axis: 'x'});
}

I want the E handle of the left container and the W handle of the right container to move along with the resize bar as I drag it. Is there a built-in feature in jQuery UI for accomplishing this? If not, what is the most effective approach?

jquery html css jquery-ui resize

Answer 1

Answer №1

If you're looking to simplify things, consider using CSS to easily adjust the width of one element and have another element follow suit:

Take a look at this basic example involving the mousemove event:

$('#resizeBar,.container').on('mousemove',function(e) {
  $('.left').width(e.pageX - 20);
})

body {
  display:flex;
  height:200px;
  color:#fff;
}
body > .container.right {
  background:#000;
  flex:1;
}
body > .container.left {
  background:#000;
  width:50%;
} 
#resizeBar {
  width:10px;
  background:red;
  margin:0 5px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container left">left</div>
<div id="resizeBar"></div>
<div class="container right">right</div>

Answer 2

If you're looking to simplify things, consider using CSS to easily adjust the width of one element and have another element follow suit:

Take a look at this basic example involving the mousemove event:

$('#resizeBar,.container').on('mousemove',function(e) {
  $('.left').width(e.pageX - 20);
})

body {
  display:flex;
  height:200px;
  color:#fff;
}
body > .container.right {
  background:#000;
  flex:1;
}
body > .container.left {
  background:#000;
  width:50%;
} 
#resizeBar {
  width:10px;
  background:red;
  margin:0 5px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container left">left</div>
<div id="resizeBar"></div>
<div class="container right">right</div>

Adjust jQuery UI's resize functionality to maintain the current total width

Answer №1

Similar questions

Utilize JQuery variables for toggling the visibility of various DIV elements

Generate HTML content using AngularJS

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

Enable the text to wrap around an interactive object that the user can freely manipulate

Guide to importing scoped styles into a <NextJS> component

The scrollbar is shifting the page's content towards the left

How to position two Bootstrap 4 Navbars side by side

The pagination feature in DataTable does not retain the edited page after making changes

Change the current tab's destination to a different URL

Implementing Bootstrap in Wordpress using functions.php

The container div with a gradient background doesn't support the use of height: auto

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

Populate the text box with database values using the first text box entry

Using Jquery to update links based on the cookie value, then replacing the original link with the new one after it has

The ul element does not encompass all child elements in terms of size

Guide on accessing JSON data within a script tag with jQuery through a bookmarklet

``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

JavaScript: A guide to finding CSS properties within a string

Adjustments to make for custom span and gutter width in Bootstrap's values