Posted on Monday, February 1st, 2010
Update 02/04/2010: Version 0.3 is out! Download below, and read the
changelog.
I’ve been working on a multiple select plugin on and off for the past couple months and finally have it stable enough for a first release. When I started this project my intentions were only to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.
Features
- Full ThemeRoller support.
- Optgroup support with clickable labels.
- Optional header with check all / uncheck all / close links.
- Degrades gracefully.
- Keyboard support (albeit, somewhat shaky at this point).
- Ability to hook into 5 different event callbacks.
- Display the checked options in a list with a configurable maximum.
- Easily change the position, fade speed, scroll container height, links text, and input text.
- The widget width inherits from the original element, but is also configurable as a parameter.
- bgiframe support.
- Only 6kb minified.
Continue Reading »
Posted in jQuery | 27 Comments »
Posted on Monday, January 4th, 2010
In my opinion, the best jQuery performance tip is to minimize your use of jQuery. That is, find a balance between using jQuery and plain ol’ JavaScript, and a good place to start is with ‘this‘. I see it all the time in the jQuery support room, and was guilty of it myself until recently, but many developers use $(this) as their hammer inside callbacks and forget about this. The difference is distinct:
When inside a jQuery method’s anonymous callback function, this is a reference to the current DOM element. $(this) turns this into a jQuery object and exposes jQuery’s methods. A jQuery object is nothing more than a beefed-up array of DOM elements.
Digging a little deeper
As you begin to nest functions the context of this changes:
<a href="#"><span>Hello World</span></a>
$("a").click(function(event){
var self = this;
$(this).find("span").each(function(){
console.log(self, this);
});
event.preventDefault();
});In this example I save this to the variable “self” so it can be referenced inside the each() loop. Otherwise it’s impossible to reference this as the anchor element inside the loop, because this is now the “span” DOM element.
Depending on what you’re doing, using this is sometimes easier and always faster than $(this). I’m not talking about scraping jQuery altogether, but rather recognizing that a lot of DOM interaction (especially the simple stuff) can just as easily be done in vanilla JS using this; you are not required to use the jQuery API. Example:
Continue Reading »
Posted in JavaScript, jQuery | 13 Comments »
Posted on Thursday, December 10th, 2009
I was refactoring some code this morning for a plugin I’m writing and ran into a case where I needed to dynamically execute a jQuery method. I had a variable that holds the value of a jQuery function I wanted to execute based on which key code was pressed; prev() for the up arrow, and next() for the down arrow. As it turns out you can do this with array notation.
Continue Reading »
Posted in jQuery | 2 Comments »
Posted on Wednesday, December 9th, 2009
I was reading this article from SitePoint earlier about how inefficient the JavaScript is behind Google’s new Closure library, and saw some interesting discussion about caching an array’s length property before entering a ‘for’ loop. This is what I’m talking about:
// uncached length property
for(var x=0; x < myArray.length; x++){}
// cached length property
for(var x=0, len=myArray.length; x < len; x++){}I saw this tip and didn’t think twice about it; I’ve always been told that caching the length property is indeed faster. I then saw a couple comments saying otherwise:
Continue Reading »
Posted in JavaScript | No Comments »
