MFPanels

This is a simple block of plain old JavaScript that will allow developers to easily turn html div's into resizable div's by simply adding one of two classes to each, resulting in a draggable splitter line on the relevant sides:

• resizable-e
• resizable-s

• Windows:check
• Android:check
• iOS: check

These classes will add a splitter/divider to the screen panels, allowing the user to drag the splitter horizontally, or vertically, and adjust the width of the neighbouring div's either side of that divider.

By default the class will also save and restore the container sizes; this is saved to the browsers localStorage (not cookie) and is unique to each web page (not including page arguments).

Prerequisites for this to work are that the div's are:

1. The div's are in a container with the class container
2. The div's sizes are given in %
3. You must use the given css

It should also be noted that because the divider drag-bars are overlayed on top of the panels, you will need to use padding to avoid their contents from being partially hidden by the dividers.

open_in_new See the methodfish demos or play with your own version using jsfiddle.net.

Example usage:

html

<script src='https://www.methodfish.com/Download/MFPanels/files/latest/js/mfpanel.js'></script>
<link rel='stylesheet preload prefetch' href='https://www.methodfish.com/Download/MFPanels/files/latest/css/mfpanel.css'>
<style>
 .container { width:100%; height: 300px}
  #left      { width:25%; height: 100%; float:left; background-color:red; color:white; }
  #center    { width:50%; height: 100%; float:left; background-color:white; }
  #right     { width:25%; height: 100%; float:left; background-color:blue; color:white; }
  
  button {
    margin-top:20px;
  }
</style>

<div class='container'>
    <div id='left'   class='resizable-e'></div>
    <div id='center' class='resizable-e'></div>
    <div id='right'></div>
</div>

<button type="button" onClick="MFPanels().reset(); location.reload()">Reset Panels</button>

Special situations

Static Panels

For situations where you wish to have static panels within the container, problems might arise with the sizing of the resizables if the static panel is before a resizable, so you are advised to continue to include resizable-* classes on those static panels, but include the classname noselect so that no dragger is included for those panels.

e.g.

html

<script src='https://www.methodfish.com/Download/MFPanels/files/latest/js/mfpanel.js'></script>
<link rel='stylesheet preload prefetch' href='https://www.methodfish.com/Download/MFPanels/files/latest/css/mfpanel.css'>
<style>
  .container { width:100%; height: 100% }
  #left      { width:25%; float:left; }
  #center    { width:50%; float:left;  }
  #right     { width:25%; float:left;  }
  #top       { height:70% }
  #bottom    { height:20% }
</style>
<div class='container'>
    <div id='left' class='resizable-e'></div>
    <div id='center' class='resizable-e'></div>
    <div id='right'>
         <div class='static-block noselect'></div>
         <div id='top' class='resizable-s'></div>
         <div id='bottom'></div>
    </div>
</div>

Responsive CSS

If you have some @media definitions on your panels then you may wish to turn off the panel sizing when in thin modes. To do this - simply ensure that you hide the draggers and fix the widths with an !important mark in your css, e.g.

css

 @media screen and (max-width:900px) {
    #left,#center,#right {
       position:unset;
       width:calc(100vw - 14px)!important;
    }
    .dragger-h {
       display:none;
    }
}

Panel size retention

By default, the panel sizes will be saved each time they are changed.

This storage will by default go to the browser localStorage relating to the calling page, and used onload to restore the sizes - but there is a risk that the original sizes will be seen before this restore occurs. Should you run into problems, you can use the javascript MFPanels().reset() to reset the panel sizes.

Tricks can then be used to hide the containers before making them visible after the MFPanels().init() has completed using a class you need to set up named invisible, which MFPanels will then remove on completion. Note, using display:none will cause problems with sizing calculations.

css

.invisible {
   visibility:hidden;
}

html

<div class='container invisible'>
    <div id='left' class='resizable-e'></div>
    <div id='center' class='resizable-e'></div>
    <div id='right'>
         <div class='static-block noselect'></div>
         <div id='top' class='resizable-s'></div>
         <div id='bottom'></div>
    </div>
</div>

init callback

Use a preset variable named _MFPanelsInitCallback and set to your function that will do what is required to do further manipulation on the panels if required (note, this must be set before declaring the mfpanel.js file),

e.g.

js

function doSomething() {
   ....
}
let _MFPanelsInitCallback=doSomething;

handle-up callback

Use a preset variable named _MFPanelsHandleUpCallback and set to your function that will do what is required to do further manipulation on the panels if required when a dragger handle is released (via touch or mouse),

e.g.

js

_MFPanelsHandleUpCallback = function(el) {
    alert('handle-up '+el.id);
}

Cookies

The class can optionally use browser cookies instead of browser localStorage to retain the panel sizes; doing this will mean that server side processing could see the last used panel sizes before the page is delivered to the browser.

This can be done using another preset variable named _MFPanelsUseCookies, e.g.

js

let _MFPanelsUseCookies=true;

Server side processing can read the cookie and use this in your panel html:

php

public function getPanelSize(string $panelId) {
    if ( !isset($_COOKIE['urlDivSizes']) ) return "";
    $urlDivSizes=json_decode($_COOKIE['urlDivSizes'], true);
    if ( !isset($urlDivSizes[$panelId]) ) return "";
    $w=$urlDivSizes[$panelId]['width']==="" ? "" : "width:".$urlDivSizes[$panelId]['width'].";";
    $h=$urlDivSizes[$panelId]['height']==="" ? "" : "height:".$urlDivSizes[$panelId]['height'].";";
    return "$w$h";
}

php

echo "<div id='left-container' 
       class='resizable-e' 
       style='".$this->getPanelSize('left-container')."'>";

info Important: Note, if you use this method then it is important to include the default width/height in the css for the panels.

Dragger color

To set the color of the panel dragger, simply adjust the paneldragger class

css

.paneldragger {
   background-color:grey!important;
   opacity:0.5!important;
}