jQuery addClass example

Change class name on click in jQuery

by D7460N

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/simplebar.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row wrapper flex-fill no-gutters flex-nowrap">
    <div class="col column01 d-flex flex-column">COLUMN01</div>
    <div class="col column02 box d-flex flex-column">COLUMN02</div>
    <div class="col handler d-flex flex-column"></div>
    <div class="col column03 box d-flex flex-column">COLUMN03</div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>

CSS

html,
body {
  min-height: 100vh;
  /* force footer to bottom of browser */
  height: 100%;
  /*for IE11*/
}

.page-header,
.page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.4);
}

.column01 {
  flex: 0 0 200px;
  background-color: rgba(0, 0, 0, 0.1);
}

.column02 {
  background-color: rgba(0, 0, 0, 0.2);
}
.handler {
  width: 20px;
  cursor: ew-resize;
  flex: 0 0 auto;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat rgba(0, 0, 0, 0.3);
}
.column03 {
  background-color: rgba(0, 0, 0, 0.3);
}
.box {
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
  }

JavaScript

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetLeft = wrapper.offsetLeft;

  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  
  // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
  var boxAminWidth = 60;

  // Resize box A
  // * 8px is the left/right spacing between .handler and its inner pseudo-element
  // * Set flex-grow to 0 to prevent it from growing
  boxA.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
  boxA.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});