JQuery_ Novice to Ninja - Earle Castledine [37]
$(window).resize(stylesheetToggle);
});
function stylesheetToggle() {
if ($('body').width() > 900) {
$('')
.appendTo('head');
} else {
$('link[href=wide.css]').remove();
}
}
We’ve named our function stylesheetToggle, and called it twice: once when the document first loads, and again whenever we resize. You’ll notice that we only need to pass the function’s name to the resize event handler; since we are not declaring a function here, we have no need for the the function keyword, or any curly braces or parentheses.
Resizable Elements
The jQuery UI library contains a Resizable plugin as part of its interaction functionality. The Resizable plugin makes elements that you select able to be resized by adding a small handle to the bottom corner of the element. This can be stretched around with the mouse (much like your operating system’s windows). Like all jQuery UI components, it’s highly configurable and easy to use. If you downloaded the full jQuery UI library earlier, you’ll already have the class ready to go. Otherwise, you’ll need to head back to the download builder and include the Resizable component—which will also require the core library and a theme.
Using the Resizable component in its most basic form is very easy. We simply select the element or elements we want to modify, and call the resizable function:
chapter_03/19_resizable_elements/script.js (excerpt)
$('p').resizable();
If we run this on our StarTrackr! site, we’re in for some unusual results: every paragraph element instantly becomes resizable!
It’s a lot of fun to see this in action: suddenly our whole web page becomes malleable. By default, the Resizable interaction adds small handles in the bottom-right corners of the elements. These are styled in the jQuery UI style sheet, so have a look in there if you’re interested in changing the way they look. The default handles are illustrated in Figure 3.7.
Figure 3.7. Resizable paragraphs
Now let’s look at a simple situation where this functionality is very handy: resizing textarea elements.
Resizable textarea
Sometimes providing a usable interface can conflict with the desire to keep a design balanced and beautiful. But thanks to jQuery, we can have our cake and eat it too—and justify our way through those tricky client walk-throughs.
One area where form and function often clash is in HTML form design. This is partly because users to your site will often have wildly different requirements. For example, if you’re providing an area for feedback, users will either want to write nothing, a little, or a lot. To strike a balance you could start a small textarea, but make it resizable. Therefore, the users with a lot to say will feel as if you’re letting them say it. Here’s how we can go about doing this using jQuery UI’s Resizable functionality:
chapter_03/20_resizable_textarea/script.js (excerpt)
$('textarea').resizable({
grid : [20, 20],
minWidth : 153,
minHeight : 30,
maxHeight : 220,
containment: 'parent'
});
This makes all our textarea elements resizeable, just like we did with the paragraph elements. The effect is shown in Figure 3.8. However, we’ve specified a few new parameters to improve the feel, and to show the Resizable component’s flexibility. It has a plethora of configuration options, which you can explore in more detail on the jQuery UI documentation site.
Figure 3.8. Resizable textarea
We’ve also constrained how far the element can be stretched by specifying the minHeight, minWidth, and maxHeight properties. You’ll notice that we’ve omitted the maxWidth property in favor of the containment parameter: this lets you specify a container restricting the resizable element. You can use either a jQuery selector as the parameter or the special keyword parent to refer to the resizable element’s parent element.
We’ve also used the grid option to confine the resizable object to steps of a certain size. For some reason, this seems to add a nice feel to the resizing interaction. The grid is specified as an array containing