Bloc resizable with jquery

<!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
	});
});
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Form Création de compte

Form Création de compte

Form Step With B4 Style01

Form Step With B4 Style01

Form login 03

Form login 03

Geocoded Locations

Geocoded Locations

Header Aside Footer Admin

Header Aside Footer Admin

Input range slider HTML style02

Input range slider HTML style02

Lightbox gallery style01

Lightbox gallery style01

Scroll down button 01

Scroll down button 01

Table bootstrap with Datatable

Table bootstrap with Datatable

bootstrap4 tabs

bootstrap4 tabs