• Choose a category
• All
• Classic-Fiction

One other parameter you’ll want to look into is the handles parameter. This specifies which sides of the element the handles will be attached to and, consequently, in which directions the element can be stretched. The parameter accepts the following options: n, e, s, w, ne, se, sw, nw, and all. You can specify any number of these by separating them with a comma. For example, { handles : 'n', 'se'} adds handles to the top and bottom-right of the element.

It’s common to see this kind of functionality built into input pages where content length will vary significantly.

Pane Splitter

Despite the disclaimer message functionality we’ve provided, our client’s legal team is still worried about the possible repercussions that might extend from failing to properly outline the company’s terms and conditions. The problem, from a design and usability perspective, is that there are pages and pages of terms and conditions divided into many subsections—yet they need to be prominently displayed on the home page. Perhaps a splitter could help us out.

A splitter is a UI component that divides multiple areas on a page in a way that allows users to resize elements; this way, users are able to decide how much space they want to allot each area. Splitters are commonplace in desktop applications, and with the explosion of Rich Internet Applications, they’re making their way onto the Web. We can build on our experience with the Resizable component to simulate a simple splitter that contains a “Table of Contents” in one pane and StarTrackr!’s “Terms and Conditions” content in the other. The widget’s appearance is shown in Figure 3.9.

Figure 3.9. A horizontal pane splitter

For now we’ll focus solely on the resizing functionality. Dynamically loading each section’s content into the panes will be covered in plenty of detail in Chapter 5.

Our splitter will consist of two div elements, representing each pane, nested inside of a containing element that has fixed dimensions. We’ll encase the table of contents in a block-level element, so that when the user resizes the panes the text won’t wrap and mess up our nested list:

chapter_03/21_horizontal_pane_splitter/index.html (excerpt)

We’ll now add some simple styles in a new splitter.css style sheet. You can see that we’ve fixed the height of the containing div, and made the child elements each consume 50% of the width by default. You could change this to specify different values if it was necessary to start with an alternative to a 50:50 split. If you need to use a CSS border, you’ll have to specify your widths in pixels and make sure they all add up:

chapter_03/21_horizontal_pane_splitter/splitter.css

#splitter {

height: 150px;

margin-top: 30px;

margin-bottom: 50px;

}

#splitter .pane {

width: 50%;

height: 100%;

float: left;

}

#splitter h2 {

margin-bottom: 0;

padding-bottom: 0;

}

#tocPane {

overflow: hidden;

background: #d6dde5 url(../images/handle.png) no-repeat

↵right center;

}

#tocPane .inner {

width: 300px;

}

#contentPane {

overflow: auto;

}

#contentPane .inner {

padding: 0 5px;

}

Next, our jQuery code. To create a horizontal splitter, we make the first element resizable and specify an east-facing handle—so only the right edge of the div will be resizable.

If you were to run the example with only a simple resizable statement, you’d notice that we’re almost there: the two elements act somewhat like a split pane—except that the right element’s width remains constant rather than expanding to fill the remaining space when you drag the handle. To take care of that, we’re going to have to do some calculations inside the resizable widget’s resize function. This is an event handler that fires as the component is being resized:

chapter_03/21_horizontal_pane_splitter/script.js (excerpt)

$('#splitter > div:first').resizable({