jQuery addClass example

Change class name on click in jQuery

by zerrax

HTML

<div class="windows">
  <div class="wrapper" style="">
    <div class="box">A</div>
    <div class="handler"></div>
    <div class="box">B</div>
  </div>

    <div class="slider"></div>


  <div class="wrapper">
    <div class="box">A</div>
    <div class="handler"></div>
    <div class="box">B</div>
  </div>
</div>

CSS

body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  
  /* 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;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}
.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: red;
  margin: 0 auto;
}
.slider {
  width: 100%;
  height:20px;
  padding: 0;
  cursor: ns-resize	;
  flex: 0 0 auto;
}
.slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: red;
  margin: 15px 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;
});


$(document).ready(function(){
	$('.slider').on('mousedown',function(e){
		$('.column').on('mousemove',function(e){
			diff = $('.slider').offset().top + 5 - e.pageY ;
			$('.top').height($('.top').height()-diff);
			$('.bot').height($('.bot').height()+diff);
		});
	});
	$('.column').on('mouseup',function(){
		$('.column').off('mousemove');
	});
});