Press "Enter" to skip to content

A JavaScript Library Allows the Creation of Manually Resizable Elements | Resizable.js

Resizable.js is a JavaScript library that allows the creation of resizable HTML divisions. This JS library for creating a resolution split layout where you can adjust the size of each ‘window‘ through drag and drop or touch events.

How to make use of it:

1. To get started, include the Resizable.js library on the webpage.

<link rel="stylesheet" href="resizable-style.css" />
<script src="resizable.js"></script>

2. Split your layout into a number of ‘Windows’ as follows:

<div id="main">
  <div class="resizable-left" id="win1">
    <div class="resizable-top" id="win3">
      <div class="resizable-left" id="win5"></div>
      <div class="resizable-right" id="win6"></div>
    </div>
    <div class="resizable-bottom" id="win4"></div>
  </div>
  <div class="resizable-right" id="win2">
    <div class="resizable-top" win="win7">
      <div class="resizable-left" id="win9"></div>
      <div class="resizable-right" id="win10">
        <div class="resizable-top" id="win11">
          <div class="resizable-left" id="win13"></div>
          <div class="resizable-right" id="win14"></div>
        </div>
        <div class="resizable-bottom" id="win12"></div>
      </div>
    </div>
    <div class="resizable-bottom" id="win8"></div>
  </div>
</div>

3. Initialize the library on the parent and completed it.

Resizable.initialise("main");

4. Make the breakup structure totally responsive.

window.addEventListener("resize", () => {
  Resizable.activeContentWindows[0].changeSize(window.innerWidth, window.innerHeight);
  Resizable.activeContentWindows[0].childrenResize();
});

5. Set the scale (in %) for each Window as follows:

var sizes = {
    "win1" : 0.5,
    "win3" : 0.75,
    "win4" : 0.5,
    "win6" : 0.4,
    "win11" : 0.8,
    "win9" : 0.5,
    "win13" : 0.4 
};
Resizable.initialise("main", size);

Resizable Split Layout In Pure JavaScript, Resizable JS Plugin/Github


See Demo And Download

Official Website(Tom-Rawlings): Click Here

This superior jQuery/javascript plugin is developed by Tom-Rawlings. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *