JQuery_ Novice to Ninja - Earle Castledine [36]
jQuery includes a way of gathering information about user-initiated window resizing, and also (via jQuery UI) a way to give users ultimate resizing power over any element on the page. Let’s dive in!
The resize Event
The resize event is a core jQuery event that fires when a document view is resized. There are a number of reasons why you’d want to react to this event. But before we examine a practical example, let’s make sure we understand how the event works:
chapter_03/17_resize_event/script.js (excerpt)
$(window).resize(function() {
alert("You resized the window!");
});
Load the index.html page in your browser and try resizing the window: every time you do, an alert will pop up. Annoying users every time they change their browser window size will probably keep us from winning any user-experience points—so let’s put this event to use in a more practical example.
Layout Switcher
If you’ve worked with CSS for any length of time, you’ll know that there’s a constant debate about which is best: fluid or fixed-width layouts. On one hand, fluid layouts make maximal use of a user’s screen real estate; on the other hand, fixed-width layouts allow you to design a pixel-perfect layout that you know won’t break when a user is viewing it with a different viewport size.
For StarTrackr! we can offer the best of both worlds: design two separate, fixed-width layouts, and switch between them by catching the resize event.
Let’s start! The default StarTrackr! web site we’ve been working with so far is a modest 650px wide. Our first task is to write some styles to make it wider—we’ll go for 850px for the wider version:
chapter_03/18_layout_switcher/wide.css
body #container {
width: 850px;
}
body #container p {
width: 650px;
}
body #header {
background-image: url('../../css/images/header-corners-wide.png');
}
body #celebs table {
width: 650px;
margin-left: 5px;
}
Notice that we’ve added a seemingly superfluous body to the beginning of each rule. This is so that these rules will take precedence over any rules in our base style sheet targeting the same elements, because they’re more specific.
The next step is to write the jQuery code to add or remove our new style sheet. All we need to do is test to see if the body element’s width is greater than 900px, append the style sheet to our head element if it is, or remove it if it’s not:
chapter_03/18_layout_switcher/script.js (excerpt)
if ($('body').width() > 900) {
$('')
.appendTo('head');
} else {
$('link[href=wide.css]').remove();
}
This puts us in a tight spot. We need to run this code in two different situations: once when we first load the page and then again whenever the page is resized. You might be tempted to just copy and paste that chunk of code, and be done with it.
Resist that temptation! Repeating yourself in code is almost always a bad idea: imagine a situation where, a few months down the line, you decide that 900px was the wrong cutoff point. You’re now thinking that you should switch style sheets only around the 1000px mark. You go into your code, change the value, and reload the page. But it’s broken, because you forgot to change the same value in the other, identical block of code. This kind of scenario can happen all too easily in any type of software development, and the more complicated your code becomes, the more likely it will happen—and the harder it will be to track down.
Fortunately, almost every programming language has constructs to help us out in these kinds of situations, and JavaScript (and hence jQuery) is no exception. So far we’ve been passing anonymous functions to all our event handlers, but now it’s time to give our function a name:
chapter_03/18_layout_switcher/script.js (excerpt)
$(document).ready(function() {
stylesheetToggle();