JQuery_ Novice to Ninja - Earle Castledine [19]
chapter_02/16_toggle_text/script.js (excerpt)
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
if ($('#disclaimer').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('Show');
}
});
There’s a lot in this code that will be new to you. We’ll save most of the details for later, but have a look at it and see if you can figure it out yourself. (Hint: remember that the selector $(this) refers to the element that caused the event to fire—in this case, the button.)
Progressive Enhancement
Our disclaimer functionality is working perfectly—and our client will doubtlessly be impressed with it. However, there’s one subtle aspect of our solution that we should be aware of: if a user came to our site using a browser lacking support for JavaScript, they’d see a button on the page that would do nothing when they clicked it. This would lead to a very confused user, who might even abandon our site.
“No support for JavaScript?” you might snort. “What kind of browser is unable to run JavaScript?!”
There might be more people than you think browsing the Web without JavaScript: users on very old computers or limited devices (like mobile phones); people with visual impairments who require screen readers to use the Web; and those who worry that JavaScript is an unnecessary security risk and so choose to disable it.
Depending on your site’s demographic, anywhere between 5% and 10% of your users might be browsing without JavaScript capabilities, and nobody wants to alienate 10% of their customers! The solution is to provide an acceptable experience to these users—and beef it up for everyone else. This practice is known as progressive enhancement.
For our disclaimer functionality, we might settle on this compromise: we want the disclaimer to be visible to all users, so we place it in our HTML. Then, we add the ability to hide it for users with JavaScript. That said, we’d prefer to avoid displaying the show/hide button to users who’ll be unable to make use of it.
One way of accomplishing this might be to hide our button with CSS, and only show it via a jQuery css statement. The problem with this trick is that it will fail if the user’s browser also lacks support for CSS. What we’d really like to do is add the button to the page via jQuery; that way, only users with JavaScript will see the button at all. Perfect!
Adding New Elements
So far we’ve seen the jQuery function used for selecting, but it does have another function of equal importance: creating new elements. In fact, any valid HTML string you put inside the jQuery function will be created and made ready for you to stick on the page. Here’s how we might create a simple paragraph element:
$('
A new paragraph!
')
jQuery performs several useful actions when you write this code: it parses the HTML into a DOM fragment and selects it—just as an ordinary jQuery selector does. That means it’s instantly ready for further jQuery processing. For example, to add a class to our newly created element, we can simply write:
$('
A new paragraph!
').addClass('new');
The new paragraph will now be given the class new. Using this method you can create any new elements you need via jQuery itself, rather than defining them in your HTML markup. This way, we can complete our goal of progressively enhancing our page.
Tip: innerHTML
Internally, the HTML string is parsed by creating a simple element (such as a div) and setting the innerHTML property of that div to the markup you provide. Some content you pass in is unable to convert quite as easily—so it’s best to keep the HTML fragments as simple as possible.
Once we’ve created our new elements, we need a way to insert in the page where we’d like them to go. There are several jQuery functions available for this purpose. The first one we’ll look at is the insertAfter function. insertAfter will take our current jQuery selection (in this case, our newly created