JQuery_ Novice to Ninja - Earle Castledine [139]
As a simple example, we’re going to extend the functionality of the $.trim method. $.trim takes a string and removes any leading or trailing spaces. We’ll add an extra parameter to the method that, if set to true, will remove all spaces from the given string:
chapter_09/08_overwriting_existing_function/script.js (excerpt)
(function($) {
var _trim = $.trim;
$.extend({
trim:function(text, clear) {
if (clear) {
return text.replace(/\s+/g,'');
}
return _trim.call(this, text);
}
});
})(jQuery);
First, as always, we’re playing nice for people who don’t want to use the $ for jQuery (see the section called “Plugins”). Next, we’re storing the original trim function in a variable so we can access it later on. Finally, we reach the important bit: extending the trim function. Our version of trim is going to accept an extra Boolean parameter. If it’s set we run our custom regular expression to remove all whitespace, and if it’s not set, we call the original jQuery trim function.
Extending code in this way is particularly useful when dealing with more complex objects; for example, if you need to modify the $.ajax method to do some additional processing on every request. In that situation you’d only want to modify the particular aspects of the code that you needed to, and leave everything else alone. By storing the original function, and referring to it as necessary, this becomes a simple task.
Create Your Own Selectors
Ten basic filters, four content filters, two visibility filters, six or so attribute filters, four child filters, and 14 form-focused filters. This is more than just the makings of a wicked Christmas carol: jQuery’s built-in filters allow you to easily select just about anything on the page! But what do we do when we want all the advertisement units in a page, or all the links that were clicked to leave a page, or all the break-out items that are below the fold?
Note: The Fold
"Above the fold” in web design terms refers to the area of a page visible on pageload, without scrolling. Hence, “below the fold” refers to the total area beneath that, which is invisible without scrolling.
The term originates from newspapers, which are generally folded in half for display. It was therefore considered advantageous to have a headline or advertisement appear above the fold, visible to anyone passing by. In particular, important stories would be positioned here in order to attract attention and entice people to buy the paper.
These are admittedly odd requests, but let’s use the opportunity to examine custom filters in detail; besides, in certain situations they can definitely work in your favor.
Rather than finding elements below the fold, let’s turn to a more useful purpose, and detect when an element is visible, or above the fold, on pageload. If the element is above the fold, we can load its content via Ajax straight away. If not, we can delay the Ajax request until later, saving both bandwidth and pageload time:
chapter_09/09_custom_selectors/script.js (excerpt)
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrollTop() +
↵$(window).height();
}
});
We’ve already looked at $.extend a few times, so accessing the selector engine should be quite familiar. The $.expr[:] object is what we need to extend in order to add our custom filters. We pass in a key/value pair, where the key is the name of our filter, and the value is a function that takes a reference to an element. The function should return true or false. If it returns true, the element tested (el) will be added to the selection. Otherwise, it will be filtered out:
chapter_09/09_custom_selectors/script.js (excerpt)
$('p:abovethefold').css('color', 'red');
If we test our new :abovethefold filter once the page has loaded, we’ll see that only paragraphs visible without scrolling will be turned red.
The extensibility of the selector engine is a little-known feature of jQuery, and one that distinguishes the