<!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 }); });