YUI Library Examples: Resize Utility (beta): Split Pane resizing with Grids CSS

Resize Utility (beta): Split Pane resizing with Grids CSS

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

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.

Creating the resize instance

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

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.

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.

Adjusting the grid on load

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

Full Example Source

Copyright © 2008 Yahoo! Inc. All rights reserved.

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