Html Splitter

Bind to the resizeStart event by type: jqxSplitter. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
    <div id="container" style="float: left">
        <div id="mainSplitter">
            <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 1</span>

            </div>
            <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 2</span>

            </div>
        </div>
        <br />
        <div style="font-family: Verdana; font-size: 13;">Events:</div>
        <div id="events" style="border-width: 0px;"></div>
    </div>
</div>

JavaScript

$('#mainSplitter').jqxSplitter({
      width: 300,
      height: 300,
      theme: 'energyblue',
      panels: [{
          size: 200
      }]
  });
  $('#mainSplitter').on('resizeStart', function (event) {

      displayEvent(event);
  });
  $('#mainSplitter').on('resize', function (event) {

      displayEvent(event);
  });

  $('#mainSplitter').on('expanded', function (event) {

      displayEvent(event);
  });

  $('#mainSplitter').on('collapsed', function (event) {

      displayEvent(event);

  });

  function capitaliseFirstLetter(string) {

      return string.charAt(0).toUpperCase() + string.slice(1);
  }

  function displayEvent(event) {

      var eventData = "Event:" + capitaliseFirstLetter(event.type);
      eventData += ", Panel 1: " + event.args.panels[0].size;
      eventData += ", Panel 2: " + event.args.panels[1].size;
      $('#events').jqxPanel('prepend', '<div class="item" style="margin-top: 5px;">' + eventData + '</div>');
  }
  $('#events').jqxPanel({
      theme: 'energyblue',
      height: '250px',
      width: '450px'
  });