YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Resize Utility: Split Pane resizing with Grids CSS

# Resize Utility: Split Pane resizing with Grids CSS

This example shows how to make a resizable split pane with Grids CSS.

View example in new window.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.

## Setting up the element that we are going to resize

First we use the Grid Builder to build a 50/50 split grid unit.

Note that we have placed the CSS property `overflow: hidden` on the element to keep the text from escaping when we resize.

#pg p { margin: 1em; } #pg { width: 600px; height: 200px; } #pg .yui-g { height: 200px; width: 600px; overflow: hidden; } #pg .yui-g .first { background-color: yellow; } #pg .yui-u { height: 100%; background-color: orange; overflow: hidden; } <div id="pg"> <div class="yui-g"> <div class="yui-u first" id="sizeIt"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p> </div> <div class="yui-u" id="sizeIt2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum bibendum metus. Sed sem sem, molestie et, venenatis eget, suscipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tellus vitae ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p> </div> </div> </div>

## Creating the resize instance

Then we make the left grid unit a Resize instance and set it to only use the `right` handle.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'] }); }); })();

## Handling the other grid

Now that we have one side resizing, we need to listen for the `resize` event. From here we will do the math needed to resize the other grid unit.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, col1 = null col2 = null; Event.onDOMReady(function() { var size = parseInt(Dom.getStyle('pg', 'width'), 10); col1 = Dom.get('sizeIt'); col2 = Dom.get('sizeIt2'); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], }); resize.on('resize', function(ev) { var w = ev.width; Dom.setStyle(col1, 'height', ''); Dom.setStyle(col2, 'width', (size - w - 6) + 'px'); }); }); })();

## Setting the max and min sizes

Now we need to make sure that the units don't get too big or too small.

We do this by setting the `minWidth` and `maxWidth` of the left unit.

We set the minWidth to 150 pixels, then we get the size of the parent element (`#pc`) and subtract the min size of the other unit (in this case 150 pixels too). Now we have a maxWidth setting.

var max = (size - 150); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], minWidth: 150, maxWidth: max });

## Adjusting the grid on load

Finally, we force a resize to bring both units into sync with each other.

resize.resize(null, 200, 200, 0, 0, true);

## Full Example Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, col1 = null col2 = null; Event.onDOMReady(function() { var size = parseInt(Dom.getStyle('pg', 'width'), 10); col1 = Dom.get('sizeIt'); col2 = Dom.get('sizeIt2'); var max = (size - 150); var resize = new YAHOO.util.Resize('sizeIt', { handles: ['r'], minWidth: 150, maxWidth: max }); resize.on('resize', function(ev) { var w = ev.width; Dom.setStyle(col1, 'height', ''); Dom.setStyle(col2, 'width', (size - w - 6) + 'px'); }); resize.resize(null, 200, 200, 0, 0, true); }); })();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Resize Utility Examples:

- Simple Resize
- Proxy Resize
- Animated Proxy Resize
- 8-way Element Resize
- Ghosting and Custom Proxy Resize
- Custom resizing for the Rich Text Editor
- Split Pane resizing with Grids CSS
- Skinning the Resize Utility
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Creating a Resizable Panel (included with examples for Container Family)
- Complex Application (included with examples for Layout Manager)

### More Resize Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings