THEMETRIAL

Resizable Split Layout In Pure JavaScript – Resizable.js

Author:Tom-Rawlings
Views Total:3 views
Official Page:Go to website
Last Update:January 11, 2021
License:MIT

Preview:

Resizable Split Layout In Pure JavaScript – Resizable.js

Description:

Resizable.js is a pure JavaScript library to create a resizable split layout where you can adjust the size of each ‘Window’ via drag and drop or touch events.

How to use it:

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

<link rel="stylesheet" href="https://www.cssscript.com/resizable-style.css" />
<script src="resizable.js"></script>

2. Split your layout into several ‘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 done.

Resizable.initialise("main");

4. Make the split layout fully responsive.

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

5. Set the size (in percent) 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);

Changelog:

01/11/2021

  • Add events for resizing starting and ending

10/20/2020

  • Update to allow resizerThickness to be specified in initialisation call

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.