• Choose a category
• All
• Classic-Fiction

handles: 'e',

minWidth: '100',

maxWidth: '400',

resize: function() {

var remainingSpace = $(this).parent().width() -

↵$(this).outerWidth();

var divTwo = $(this).next();

var divTwoWidth = remainingSpace - (divTwo.outerWidth() -

↵divTwo.width());

divTwo.css('width', divTwoWidth + 'px');

}

});

Every resizing will now also trigger a change in the second element’s width. A bit of basic math helps us work out what the widths should be: we take the parent container’s width (that is, the total width), then subtract the first div’s outerWidth. The outerWidth function is a useful way to grab the total width of an element, including any padding and borders (it can also include margins if you pass it the optional parameter true). Perhaps unsurprisingly, there’s a corresponding outerHeight function as well.

Having calculated how much space is left to use up, we’re almost ready to set the first element’s width. There’s just one remaining catch: if the second div has borders or padding, we need to take these into consideration. Unfortunately the outerWidth function is read-only, so we’re unable to use it to set the total height.

To calculate how much of the element’s width consists of borders and padding, we need to subtract the element’s outerWidth from its width. Subtracting that from the remainingSpace variable gives us exactly how many pixels wide the second div needs to be—and we can complete our horizontal splitter.

Important: JavaScript Variables

The line var remainingSpace = $(this).parent().width() - $(this).outerWidth(); assigns the result of the calculation to a variable called remainingSpace. From now on in our code, we can simply write remainingSpace whenever we need to access this value.

The following line (var divTwo = $(this).next();) is performing a very similar function, except that this time we’re assigning a jQuery selection to a variable (divTwo). This can subsequently be used like any other jQuery selection.

Using variables like this helps to make your code more readable, as you can keep each line as concise as possible. It also makes your code more efficient; retrieving a value from a variable is much quicker for JavaScript than figuring out the value in the first place.

If we then wanted to have a go at implementing a vertical splitter, there’s little to change: our pane elements stack on top of each other (rather than side by side), and our resizable call uses a south-facing handle instead of an east-facing one. The code is also almost identical—but now we’re interested in the element’s heights, not widths:

chapter_03/22_vertical_pane_splitter/script.js (excerpt)

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

handles: 's',

minHeight: '50',

maxHeight: '200',

resize: function() {

var remainingSpace = $(this).parent().height() -

↵$(this).outerHeight();

var divTwo = $(this).next();

var divTwoHeight = remainingSpace -

↵(divTwo.outerHeight() - divTwo.height());

divTwo.css('height', divTwoHeight + 'px');

}

});

These simple splitters are quite useful, require very little code, and will be suitable for many purposes. But if you require complex splitter behavior, such as multiple split panes or nested panes, head over to the plugin repository and check out the jQuery Splitter plugin.

That’s How We Scroll. And Animate.

What a chapter! We’ve mastered animation, scrolling, and resizing, and seen how chaining can help us easily write succinct, powerful functionality in a readable and natural manner. We’re starting to apply our jQuery knowledge to create some great effects. However, what’s important to concentrate on as you move through the book is not the effects themselves, but the underlying concepts that we use to implement them.

Even the most complex-looking effects tend to come out of a few simple actions chained together cleverly. It’s up to you to sit down, think up some ideas, and try to implement them for yourself.

Chapter 4

Images and Slideshows

There’s no more fooling around now. With the basics well and truly under our belts, we already have unlimited potential