Resizeable using JQuery

 

Resizing with JQuery offers more options, and the ability to drag the edge of a div rather than just a corner.

The following example illustrates a fairly basic example with the edge of the div to be dragged given a coloured border.

resizeablejquery.html

..

The HTML is similar to the previous examples, with the links to JQuery in the head of the document.

The HTML code:

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Resizable - Default functionality</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src="resizejq.js"></script>
    <link rel="stylesheet" href="resizejq.css">
</head>
 
<body>
    <div id="parent">
        <div id="topmenu">
            <h1>CSS Resizeable</h1>
            <p>This is the top menu. Drag the bottom border of this pane.</p>
            <p>This is the top menu</p>
            <p>This is the top menu</p>
        </div>
 
 
        <div id="div1">
            <div class="content">
                <p>This is text in the left hand pane. Drag the right hand border of this pane.</p>
                <p>This is text in the left hand pane</p>
                <p>This is text in the left hand pane</p>
            </div>
        </div>
        <div id="div2">
            <div class="content">
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
                <p>This is text in the right hand pane</p>
            </div>
        </div>
    </div>
 
</body>

The CSS is again very similar to the previous example, but this time we have added box-sizing: border-box; But note that the Javascript that updates the width of div2 still needs to add space for the border.

We have hidden the overflow where we want a coloured border to indicate the draggable zone. The aspects of CSS important for the resize are highlighted in yellow.

The CSS code:

html {
  box-sizing: border-box;
  overflow: hidden;
}
*, *:before, *:after {
  box-sizing: inherit;
}
 
#parent{
    position:absolute;
    height:100vh;
    margin:0;
    padding:0;
    width:100%;
}
#div1{
    box-sizing: border-box;
    position:relative;
    float:left;
    height:calc(98vh /8 * 7);
    width:50%;
    background-color:#A2A;
    overflow: auto;
    overflow-y: hidden;
    border-right: 5px solid red;
}
#div2{
    position:relative;
    float:left;
    height:calc(98vh /8 * 7);
    width:50%;
    background-color:#BBB;
    overflow: auto;
}
#topmenu{
    position:relative;
    width:100%;
    height: calc(98vh /8 );
    overflow: auto;
    overflow-x: hidden;
    border-bottom: 5px solid blue;
 
}
body {
    overflow: hidden;
}

Each div to be resized is first declared to be resizeable.

Javascript functions here are called by the action of dragging the border of the div to resize it, via JQuery.

We have also added a function that ensures the resize also takes place when the window size changes.

Notice how we have used the "parent" div as the base for calculating the resize values.

The Javascript code:

$(function() {
    $("#div1").resizable();
    $("#div2").resizable();
    $("#topmenu").resizable();
    
$('#topmenu').resize(function(){
   $('#div2').height($("#parent").height()-$("#topmenu").height());
   $('#div1').height($("#parent").height()-$("#topmenu").height());
});
    
$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()-6);
});
    
$('#div2').resize(function(){
   $('#div1').width($("#parent").width()-$("#div2").width());
});
 
$(window).resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()-6);
   $('#div1').height($("#parent").height()-$("#topmenu").height());  
   $('#div2').height($("#parent").height()-$("#topmenu").height());  
});
});