<!DOCTYPE html>
<html>
<head>
<title>jquery-resizable - A simple splitter panel | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="jquery-resizable - A simple splitter panel">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page-container">
<h1>
jquery-resizable - A simple splitter panel
</h1>
<hr />
<div class='box' >
<div class="map" ></div>
<div class='info' >
<div class="btn-resize" ></div>
</div>
</div>
<label>Horizontal Splitter Panes:</label>
<div class="panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
<label>Vertical Splitter Panes:</label>
<div class="panel-container-vertical">
<div class="panel-top">
top panel
</div>
<div class="splitter-horizontal">
</div>
<div class="panel-bottom">
bottom panel
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
* {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
html,
body {
height: 100%;
font-family: 'Ubuntu', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.page-container {
margin: 20px;
}
/* horizontal panel*/
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
/* avoid browser level touch actions */
xtouch-action: none;
}
.panel-left {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
/* vertical panel */
.panel-container-vertical {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid silver;
overflow: hidden;
}
.panel-top {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
height: 150px;
width: 100%;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter-horizontal {
flex: 0 0 auto;
height: 18px;
background: url(hsizegrip.png) center center no-repeat #535353;
cursor: row-resize;
}
.panel-bottom {
flex: 1 1 auto;
/* resizable */
padding: 10px;
min-height: 200px;
background: #eee;
}
label {
font-size: 1.2em;
display: block;
font-weight: bold;
margin: 30px 0 10px;
}
pre {
margin: 20px;
padding: 10px;
background: #eee;
border: 1px solid silver;
border-radius: 4px;
overflow: auto;
}
.box{
width:600px;
height:auto;
background:#ddd;
}
.map{
height:300px;
width:100%;
background:green;
z-index:1;
position:relative;
}
.info{
height:300px;
width:100%;
position:relative;
background:red;
margin: -30px 0 0;
z-index:2;
}
.btn-resize{
width:100%;
height:30px;
background:yellow;
cursor:pointer;
}
// <reference path="../bower_components/jquery/dist/jquery.js" />
/*
jquery-resizable
Version 0.35 - 11/18/2019
© 2015-2019 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/
(function(factory, undefined) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global jQuery
factory(jQuery);
}
}(function($, undefined) {
if ($.fn.resizableSafe)
return;
$.fn.resizableSafe = function fnResizable(options) {
var defaultOptions = {
// selector for handle that starts dragging
handleSelector: null,
// resize the width
resizeWidth: true,
// resize the height
resizeHeight: true,
// the side that the width resizing is relative to
resizeWidthFrom: 'right',
// the side that the height resizing is relative to
resizeHeightFrom: 'bottom',
// hook into start drag operation (event passed)
onDragStart: null,
// hook into stop drag operation (event passed)
onDragEnd: null,
// hook into each drag operation (event passed)
onDrag: null,
// disable touch-action on $handle
// prevents browser level actions like forward back gestures
touchActionNone: true,
// instance id
instanceId: null
};
if (typeof options == "object")
defaultOptions = $.extend(defaultOptions, options);
return this.each(function () {
var opt = $.extend({}, defaultOptions);
if (!opt.instanceId)
opt.instanceId = "rsz_" + new Date().getTime();
var startPos, startTransition;
// get the element to resize
var $el = $(this);
var $handle;
if (options === 'destroy') {
opt = $el.data('resizable');
if (!opt)
return;
$handle = getHandle(opt.handleSelector, $el);
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
if (opt.touchActionNone)
$handle.css("touch-action", "");
$el.removeClass("resizable");
return;
}
$el.data('resizable', opt);
// get the drag handle
$handle = getHandle(opt.handleSelector, $el);
if (opt.touchActionNone)
$handle.css("touch-action", "none");
$el.addClass("resizable");
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
function noop(e) {
e.stopPropagation();
e.preventDefault();
};
function startDragging(e) {
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
if ( e.preventDefault ) {
e.preventDefault();
}
startPos = getMousePos(e);
startPos.width = parseInt($el.width(), 10);
startPos.height = parseInt($el.height(), 10);
startTransition = $el.css("transition");
$el.css("transition", "none");
if (opt.onDragStart) {
if (opt.onDragStart(e, $el, opt) === false)
return;
}
$(document).on('mousemove.' + opt.instanceId, doDrag);
$(document).on('mouseup.' + opt.instanceId, stopDragging);
if (window.Touch || navigator.maxTouchPoints) {
$(document).on('touchmove.' + opt.instanceId, doDrag);
$(document).on('touchend.' + opt.instanceId, stopDragging);
}
$(document).on('selectstart.' + opt.instanceId, noop); // disable selection
$("iframe").css("pointer-events","none");
}
function doDrag(e) {
var pos = getMousePos(e), newWidth, newHeight;
if (opt.resizeWidthFrom === 'left')
newWidth = startPos.width - pos.x + startPos.x;
else
newWidth = startPos.width + pos.x - startPos.x;
if (opt.resizeHeightFrom === 'top')
newHeight = startPos.height - pos.y + startPos.y;
else
newHeight = startPos.height + pos.y - startPos.y;
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
if (opt.resizeHeight)
$el.height(newHeight);
if (opt.resizeWidth)
$el.width(newWidth);
}
}
function stopDragging(e) {
e.stopPropagation();
e.preventDefault();
$(document).off('mousemove.' + opt.instanceId);
$(document).off('mouseup.' + opt.instanceId);
if (window.Touch || navigator.maxTouchPoints) {
$(document).off('touchmove.' + opt.instanceId);
$(document).off('touchend.' + opt.instanceId);
}
$(document).off('selectstart.' + opt.instanceId, noop);
// reset changed values
$el.css("transition", startTransition);
$("iframe").css("pointer-events","auto");
if (opt.onDragEnd)
opt.onDragEnd(e, $el, opt);
return false;
}
function getMousePos(e) {
var pos = { x: 0, y: 0, width: 0, height: 0 };
if (typeof e.clientX === "number") {
pos.x = e.clientX;
pos.y = e.clientY;
} else if (e.originalEvent.touches) {
pos.x = e.originalEvent.touches[0].clientX;
pos.y = e.originalEvent.touches[0].clientY;
} else
return null;
return pos;
}
function getHandle(selector, $el) {
if (selector && selector.trim()[0] === ">") {
selector = selector.trim().replace(/^>\s*/, "");
return $el.find(selector);
}
// Search for the selector, but only in the parent element to limit the scope
// This works for multiple objects on a page (using .class syntax most likely)
// as long as each has a separate parent container.
return selector ? $el.parent().find(selector) : $el;
}
});
};
if (!$.fn.resizable)
$.fn.resizable = $.fn.resizableSafe;
}));
$(document).ready(function(){
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
$(".map").resizable({
handleSelector: ".btn-resize",
resizeWidth: false
});
});