JQUERY: How to code resizable sliding content panels

Inspired by the technique used on learn how to add interaction to page content


Inspired by the technique used on learn how to add interaction to page content



Research has repeatedly proven that humans have their fair share of problems interpreting numbers. If data is spruced up visually, keeping tabs on information is much easier.

This instalment of our never-ending series on web techniques was inspired by a website ( which makes use of draggable columns to represent an amount of information visually. Users arranged the width of multiple columns on the screen in order to map their behavioural patterns to the data model of the application.

This, however, is but one application for movable columns. As websites strive to replace classic desktop applications, multicolumn views gain importance: for example, an email client could display three panes containing the folder’s content, an email’s content and a folder structure next to one another.

Providing draggable windows is a sure-fire way to endear such an application to its users: as of this writing, most web-based programs lack capabilities for the flexible positioning of their contents.

1. Div tags

Let’s get started by erecting the scaffolding of our website. It consists of three <div> tags, which are arranged next to one another via the width and padding-left properties. Describing the spaces with relative values ensures that the page remains fullscreen even if the user changes his window size.

2. Add a draggable handle

Offering resizable panels is fun only if the user can actually change their size. This is best accomplished via two handles displayed in the middle of the borders. For now, adding simple boxes via a <span> tag and some CSS magic shall suffice.

3. Add draggability

JQuery UI contains a robust drag-and-drop capability which works better than the one found in HTML5. Our example loads jQuery UI from the official CDN, and it adds event handlers which dumps the supplied information into the browser’s debugger console.

<script type="text/javascript">
$( init );
function init() {
function handleDragStart( event, ui ) {
console.log( "Drag starts!" + event);
function handleDrag( event, ui ) {
console.log( "Drag !" + event);
function handleDragStart2( event, ui ) {
console.log( "Drag starts!" + event);
function handleDrag2( event, ui ) {
console.log( "Drag !" + event);

4. Do some maths

The next step involves the dynamic recalculation of the column widths as the position of the element is modified. This is relatively easy: the element’s initial location is stored as onDragStart fires. After that, the CSS properties are recalculated dynamically.

5. Provide a helper object

As of this writing, the user can move the handles up and down. This is unsatisfactory, but can be solved by providing a helper object, which gets dragged across the screen in place of the original object.

6. Tilt the handles

Now transform the handles to an oblong shape in order to give our users a visual cue that they can use them to drag around. This is easily accomplished via a transform order, which gets added to the stylesheet of the boxes.

<style type="text/css">
div span.myBox{
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background-color: lavender;
border: solid 1px silver;
transform: rotate(45deg);