Math Question about a resizable Pane Splitter

JavaScript
1

Here is the html code:

<div id="splitter">
        <div class="pane" id="tocPane">
            <div class="inner">
               ...
            </div>   
        </div>
        <div class="pane" id="contentPane">
            <div class="inner">
               ...
            </div>   
        </div>
</div>

$(document).ready(function(){
  $('#splitter > div:first').resizable({ 
    handles: 'e', 
    minWidth : '100',
    maxWidth : '400',
    resize: function() { 
      var remainingSpace = $(this).parent().width() - $(this).outerWidth();
      var divTwo = $(this).next();
      var divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
      divTwo.css('width', divTwoWidth + 'px');
    }
  });
});

Can anyone explain the math part? Which element is “this”?
I’m really confused. Thanks.

2

The function fires when the div is resized. The div object is the “this” in the handler function.
The arithmetic used in the page splitter relate to the width of each of the two panes during dragging and the surrounding parent div. To be specific and referring to the example script below:

1: $(this).parent().width() refers to the parent of tocPane which is the div with the id “splitter”. The value is a constant = 404px in this example.
2: $(this).outerWidth() is the width of the tocPane and varies from 0 - 404px as it moves.
3: The variable “remainingSpace” is the difference between 1 and 2 above. It is the white area next to the grey area. it gets smaller as the grey area gets larger in the example script.
4: divTwo.outerWidth() is the same as remainingSpace.
5: divTwo.width() +2 is same as remaing space. The 2 is the border width on both sides.

I have removed some of the overlapping variables to simplify the example maths. I have also added the border width variable, which is a constant in these calculations. The remainingSpace value is continuously output to window.status, so you can see it working in browsers like safari, were it is displayed.

The following script works in all modern browsers, except IE. Interestingly, it does not even work in IE9. You will notice that the script calls on several external source files. These are the jQuery min js, a jQuery UI js and a jQuery UI css. The script will not work without them. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js">
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<title>Page Splitter</title>
<style type="text/css">
  body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
  #splitter { position:relative; top:0px; width:404px; height:150px; margin: 30px 0px 50px 50px;  }  
  div.pane { width:200px; height:130px; float:left; border:1px solid #666;  }
  #tocPane { background-color: #CCC; }
  .msg { position:absolute; bottom:0px; left:0px; width:100%; text-align:center; font-weight:bold; margin:0px; }
</style>
</head>

<body>

<div id="splitter">
  <div id="tocPane" class="pane">
  </div>
  <div id="contentPane" class="pane">
  </div>
  <div class="msg">< Drag center bar ></div>
</div>
<script type="text/javascript">
      $bWidth=2;
      $('#splitter > div:first').resizable({ handles:'e', minWidth :'2', maxWidth :'398',
       resize: function(){
        var remainingSpace = $(this).parent().width() - $(this).outerWidth();        
        $(this).next().css('width', (remainingSpace-$bWidth)+'px');
       // 
        window.status=(remainingSpace);
      }
  });
// ----------
  </script>

</body>

</html>