JQuery Split div issue

Jj17
November 1, 2023
283 views
1 vote
2 Answers

I am trying to create a pair of resizable sidebars using jQuery and jQueryUI (but not completely necessary).

The issue I am running into is that it doesn’t resize properly. The right sidebar is giving me issues as it resizes the left works completely fine. I want to know how to mimic the behavior of the left side bar in regards to how it works well for the right sidebar

I don’t know how to fix it, split.js was recommended but I can’t get that to work. My project is a simple one that shouldn’t require a complicated set up, any help will do.

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w",
    minWidth: 100,
    maxWidth: 500,
  });
});

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

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Answers

Is this what you want ?

You could set left to 0 during resize by adding this :

 resize: function(event, ui) {
      ui.position.left = 0;
 }

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w", 
    resize: function(event, ui) {
      ui.position.left = 0;
    },
    minWidth: 100,
    maxWidth: 500,
  });
});

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

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

The issue is related to how E vs W resize happens. When you perform a Resize on the E Handle, the elements Width is changed. When you resize on the W, the Left position is changed, as well as the Width.

Example:

$("#resizable").resizable({
  maxWidth: 500,
  minWidth: 100,
  handles: "w",
  resize: function(e, ui) {
    console.log(ui.element.css("left"), ui.size.width);
  }
});

#resizable {
  width: 100px;
  height: 100px;
  background: #ccc;
  right: 0;
  position: absolute;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="resizable"></div>

To properly make the Right Sidebar operate in the same way as the Left, we just need to perform two actions:

Make the Main Content width grow or shrink as needed
Grown and Shrink the Right Sidebar the opposing amount

Consider making the Main Content resizable and at the some time, change the Width of the Right Sidebar, in a reversed fashion.

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".main-content").resizable({
    handles: "e",
    resize: function(e, ui) {
      var t = $(".container").width();
      var l = $(".left-sidebar").width() + ui.size.width;
      $(".right-sidebar").css({
        maxWidth: "500px",
        minWidth: "100px"
      }).width(t - l);
    }
  });
});

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

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Please signup or login to give your own answer.

Click here to cancel reply.