Thursday, March 4, 2010
jQuery makes implementing event delegation quick and easy! In version 1.4.2 there are now three ways to utilize event delegation: .live(), .delegate(), and do-it-yourself. Each technique progressively gives you a little more control and flexibility. Lets take a look at these three techniques with a quick 101 crash course on event delegation first.
Event Delegation 101
At its core event delegation is all about letting events bubble up the DOM tree to a parent element. This provides several adva…
Posted in jQuery with 7 comments
Thursday, February 25, 2010
jQuery’s event system has seen incredible feature growth over the years and with that growth came some pains. jQuery 1.4.2 included a much needed overhaul of the event system. This also brought some backwards incompatible changes to the two new special event hooks added in 1.4. I previously blogged about these two new special event hooks: add and remove. These two events hooks brought lots of power by being able to manipulate the event details for each event handler registered. This is different…
Posted in jQuery with 1 comment
Wednesday, June 24, 2009
When selecting elements jQuery has an optional second argument called context. This context provides a means to limit the search within a specific node. This is great when you have a very large DOM tree and need to find, for example, all the <a> tags within a specific part of the DOM tree. I’ve seen various articles, usually performance related, stating that you should be using a context for your selectors. While it is true that using a context for your selectors can potentially boost perf…
Posted in jQuery with 22 comments
Wednesday, June 17, 2009
David Walsh had a great idea to coerce an element that is given a click event to have a pointer for its cursor. The pointer is a universal symbol for users to know that something is clickable. Using this technique it would be “automatic” that any element given a click event would have a pointer. David set out to use the Special Event hooks within jQuery to make this work. Unfortunately for David those hooks are not widely documented, so his first attempt was unsuccessful. So, lets see how we can…
Posted in jQuery with 2 comments
Thursday, June 4, 2009
These Special Event hooks were changed in 1.4.2. Check out this blog post to see the details about the change.
In jQuery 1.3.3 1.4 there are two new special event hooks: add and remove. These two hooks, unlike setup and teardown, are called for each event being bound. The add hook receives the handler, data, and namespaces as arguments. The remove hook receives the data and namespaces as arguments. The add and remove hooks enable the creation of more complex, even customizable, events.
If you…
Posted in jQuery, jQuery Edge with 7 comments
Thursday, May 28, 2009
In jQuery 1.3.3 1.4 the .hover() method will optionally accept a single method instead of always requiring two methods. This allows you to contain your logic within one method instead of duplicating it among two. I don’t know about you but I’ve avoided using the .hover() method in favor of just manually binding the mouseenter and mouseleave events so that I could use a single function to handle both events. So, lets look at a typical use-case for hover.
$(‘li’)
.hover(function(event) {…
Posted in jQuery, jQuery Edge with 5 comments
Thursday, May 14, 2009
jQuery in the past hasn’t always played well with other windows and documents than the one it was loaded in. However, jQuery is moving in the right direction to help ease the pain of cross window/frame development. There have been several commits recently that make previously window/document dependent methods, well… less dependent. So far .bind(), .css(), .width(), and .height() have all been updated to work with other windows and documents.
So, how might you use this new found jQuery power?…
Posted in jQuery, jQuery Edge with 5 comments
Tuesday, May 12, 2009
Brand new to jQuery SVN is the oft-requested feature of providing a different value for the “this” object in an event callback. Previously jQuery would always send the element as the value of “this” in the callback. You can utilize this new feature by passing the object you’d like to represent “this” in the callback as the last argument to either .bind() or .live(). Lets look at some example code!
The typical use-case for this functionality is that you’ll have an object (or a class) and you wan…
Posted in jQuery, jQuery Edge with 9 comments
Friday, May 8, 2009
In jQuery 1.3.3 1.4 the .live() method will have the ability to pass data along just like you might do with .bind(). The .bind() (and now .live()) method takes an optional second argument called “data”. The data can then be accessed within the event handler by using the event.data property. Here is what the code would look like to use this feature.
// The data
var eventConfig = {
selectedClass: “selected”
};
$(“li”).live(“click”, eventConfig, function( event ) {
// Retreive selectedCla…
Posted in jQuery, jQuery Edge with 5 comments
Thursday, May 7, 2009
Paul Irish and ajpiano (via Google Groups) saw an opportunity to make the .index() method work better for them. Currently the .index() method looks for a given element within the jQuery collection. However, they wanted a quick way to get the index of the current element amongst its siblings. Here is the scenario they laid out.
$(“#sometable th img”).click(function() {
// Need to find out the index of the <th>
// get the <th>
var $th = $(this).parent();
// find the…
Posted in jQuery, jQuery Edge with 4 comments
Wednesday, May 6, 2009
In jQuery 1.3.3 1.4 the .toggleClass() method will have a couple more modes of operation. Currently in jQuery 1.3.2 the .toggleClass() method can only toggle one class name at a time. The new .toggleClass() method will be able to toggle multiple class names and will also be able to toggle all the classes on or off. Here are the different ways you’ll be able to use .toggleClass().
// With the following element
// <div class=”a b c”></div>
// Toggle all classes $(‘div’).toggleClass()…
Posted in jQuery, jQuery Edge with 3 comments
Thursday, March 26, 2009
jQuery, since 1.2.2, has had an API for “special events”. These events are special because they have the ability to do some extra work for specific events and even the option to bypass some of the internal jQuery event system. With these special events you can create custom events that require some setup work or you can completely overwrite the behavior of native events.
We use special events in jQuery to create the “mouseenter” and “mouseleave” events. In addition to those two events we used i…
Posted in jQuery with 14 comments
Thursday, February 26, 2009
Most of the Flash embedding I’ve done has involved passing in some dynamic variables to the flash. After trying a few different techniques for passing in those variables, I believe I found a solution I’m happy with. I use the jQuery SWFObject plugin, the jQuery Metadata plugin with JSON, and a small helper plugin to keep things DRY.
jQuery SWFObject
The jQuery SWFObject brings the awesomeness that is SWFObject to the “jQuery Way” of doing things. For example, to embed a simple Flash movie you…
Posted in jQuery, Ruby on Rails with 0 comments
Wednesday, February 25, 2009
Rails has a few helpers that make creating RESTful action links, like a delete link, pretty easy. A delete action has to use a POST request which means it has to use a form or AJAX. To get around this Rails spits out some inline JavaScript that generates the form and submits it for you when you click the link in the browser. This means that the delete link requires JavaScript to work. This is becoming a typical requirement for web apps (possibly propagated by how simple Rails and similar framewo…
Posted in jQuery, Ruby on Rails with 12 comments
Tuesday, February 24, 2009
On a recent Rails based project, cubeless, I was cleaning up some legacy code with the help of Burin. The project is large and has been through several Rails upgrades but wasn’t fully taking advantage of some of “newer” Rails best practices.
The controllers were heavy with lots of inline RJS and actions that catered only to a particular JavaScript function. We set out to keep the JavaScript isolated to the public/javascripts folder and to use REST in conjunction with the respond_to method. Amo…
Posted in jQuery, Ruby on Rails with 4 comments
Monday, November 10, 2008
After having to step away for sometime, I was able to complete the rewrite of the offset method for jQuery. As my last post on the subject mentioned, the performance of the offset method had some room for improvement. So, how does the new offset method stack up?
jQuery 1.2.6 Offset vs. The New Offset
Browser
jQuery 1.2.6
New Offset
FireFox 2
225ms 45ms…
Posted in jQuery with 1 comment
Saturday, July 19, 2008
The offset method in jQuery is a bit slow … okay … really slow. :) I’ve been working on a new version of the offset method from the ground up largely focusing on performance. I’ve made some good progress and just had to share the results thus far!
The test case is simple. I have a div within a div and both divs have margin, border, padding. I first run the original offset method from jQuery 1.2.6 200 times. Then I run my new version 200 times. The original offset method took 260.823ms to…
Posted in jQuery with 0 comments
Friday, May 9, 2008
I’ve been asked a few times if Dimensions would provide a method for getting the scrollbar width. In Dimensions 1.0 I created an internal method for finding the scrollbar width to hack around some browser limitations. I eventually found other ways around those limitations and that code is no longer in Dimensions. I know that in some unusual cases it can be useful, so I want to go ahead and provide that code as one of my jQuery snippets. It is just a single method added to the jQuery namespace ca…
Posted in jQuery with 1 comment
Friday, May 9, 2008
The Dimensions plugin was originally started by Paul Bakaus. By popular demand my offset plugin was merged with the Dimensions plugin. From that point on I contributed several other methods to Dimensions and helped maintain the plugin with Paul. Dimensions became one of the most widely depended on plugins by developers and other plugins. It was a very common request to have Dimensions moved into the core to help relieve plugin dependency issues. We started by moving the most popular methods into…
Posted in jQuery with 0 comments
Thursday, May 8, 2008
jQuery methods, in most cases, operate on zero or more matched elements. Getter type methods are an exception. The getter methods only return the results for the first matched element. This is overwhelmingly the typical use-case. However, sometimes you might want to get the results for all matched elements in the jQuery collection. Introducing jQuery.batch, a small extension to jQuery that adds such functionality.
jQuery.batch extends the core with plural forms of the getter methods. Methods li…
Posted in jQuery with 1 comment
Sunday, August 19, 2007
Live Query, previously called Behavior, utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX or a script.
$(‘a’)
.livequery(‘click’, function(event) {
alert(‘clicked’);
return false;
});
Once you add new A tags to the document, L…
Posted in jQuery with 4 comments
Friday, August 17, 2007
Release early, release often. In the 1.1.1 update there was a regression in Safari with calculating the window width and height. I also fixed a bug in getting the offset of table cells with borders in Mozilla. As usual, you can report bugs, request features and download Dimensions 1.1.2 from the Dimensions project page.…
Posted in jQuery with 0 comments
Friday, August 17, 2007
I just released Dimensions 1.1.1 which fixes up an issue when trying to get the document width and height. Grab the zip from the Dimensions project page.…
Posted in jQuery with 1 comment
Sunday, August 12, 2007
I just released Dimensions 1.1. It includes a new option to include margins for the outerWidth and outerHeight methods. I’ve also fixed the issues with Safari 3 and the offset method. This update does require jQuery 1.1.3 or greater. Feel free to grab the zip from the Dimensions project page. Oh and the docs have been updated for 1.1.…
Posted in jQuery with 0 comments
Wednesday, July 25, 2007
I just released Dimensions 1.0.1. It fixes an issue with fixed position elements in Opera and makes it easier to run the test suite locally.
You can download the zip from the Dimensions project page.…
Posted in jQuery with 0 comments
Sunday, July 22, 2007
Dimensions 1.0 is final! This is a very big release for Dimensions and includes a lot of bug fixes, new features, an automated test suite. So what new features have been added to Dimensions in 1.0?
A position method to get the positioned offset.
An offsetParent method to get the positioned parent.
The scrollTop and scrollLeft methods can now set the value as well as get the value of the scroll offsets.
The offset method has some new options:
A relativeTo option that provides a way to get the…
Posted in jQuery with 0 comments
Sunday, July 1, 2007
Hot on the heels of the jQuery 1.1.3 release, here is Dimensions 1.0 release candidate 1! Dimensions 1.0rc1 includes several key new features.
A new method, called position, to get the positioned offset of an element
A new lite option to the offset method that runs much faster
The offset method now works on the body element
The scrollTop and scrollLeft methods are now setters and getters
A new test suite
Updated documentation
And lots of bug fixes
Still to come are more documentation and exa…
Posted in jQuery with 0 comments
Tuesday, June 26, 2007
I just added a new plugin called, gradient. It dynamically applies a configurable gradient to the background of an element. You create a gradient like this:
$(‘.gradient’).gradient({ from: ‘003366’, to: ‘FFFFFF’ });
Check out the visual test, read the docs and grab the code.…
Posted in jQuery with 6 comments
Monday, June 25, 2007
This morning I checked in some docs for the bgiframe plugin. Now when you grab the latest from SVN, you also get the docs. As before you can also get the docs here.…
Posted in jQuery with 0 comments
Monday, June 25, 2007
A common question on the jQuery mailing list is: “Where is the hasClass method?”. jQuery has a very flexible method named is. This method takes an expression to test against. For example you could see if a particular element is a form element.
$(‘#myElement’).is(‘form’);
This will return true or false if the element is a form or not. This method is pretty flexible and makes sense but it can be a little hard to find. We can check to see if an element is of a particular class (or has a class na…
Posted in jQuery with 2 comments
Wednesday, June 20, 2007
Jesper Larsen reminded me in his recent comment that Firefox does not properly report the pageX, pageY, clientX and/or clientY event properties on the mouse wheel event. I quickly responded with a work around by using the mousemove event. However, wouldn’t it be better if the mouse wheel plugin would just handle that for you? I think so and now it does.
Grab the latest version (2.2) from the project page and you can now use the pageX, pageY, clientX and/or clientY even in Firefox without having…
Posted in jQuery with 0 comments
Tuesday, June 19, 2007
Just updated the bgiframe plugin to work better with the upcoming jQuery 1.1.3 and added some optimizations as suggested by George Adamson. You can grab the latest release from the bgiframe project page.
Here is the Change Log for bgiframe 2.1:
Updated to work with jQuery 1.1.3
Added $.browser.version for jQuery < 1.1.3
Optimized duplication check by using child selector and using .length test…
Posted in jQuery with 1 comment
Sunday, June 17, 2007
Internet Explorer provides an interesting property called outerHTML. The outerHTML property returns the HTML that composes the whole element, unlike innerHTML which returns the HTML that composes of what is inside the element. None of the other browsers implemented this non-standard property but it can be useful sometimes. So here is a cross browser implementation of outerHTML using jQuery.
jQuery.fn.outerHTML = function() {
return $(‘<div>’).append( this.eq(0).clone() ).html(); };…
Posted in jQuery with 13 comments
Sunday, June 10, 2007
Internet Explorer provides a handy little method called swapNode. This method allows you to swap one element with another. Now the functionality of swapNode is available in a jQuery method called swap. The swap method can take a selector, an element or a jQuery object. It will take the first matched elements and swap them. The usage is easy. For example if we wanted to swap the first paragraph with the last paragraph, it would look like this.
$(‘p:first’).swap(‘p:last’);
The swap method is pr…
Posted in jQuery with 5 comments
Tuesday, June 5, 2007
With jQuery 1.1.3 arriving soon, I’ve updated the Mouse Wheel plugin to work with the updated event system. If you don’t know already, jQuery 1.1.3 will use DOM Level 2 methods (addEventListener and attachEvent) instead of DOM Level 1 methods (element.onclick) under-the-hood. Most code will not be affected by this move to DOM Level 2 event handlers. However, the Mouse Wheel plugin deals directly with normalizing the mouse wheel event and just needed a minor tweak to be compatible.
You can grab…
Posted in jQuery with 3 comments
Tuesday, June 5, 2007
It is sometimes necessary to bind two or more events to an element that utilize the same function. Using jQuery it might look something like this (where ‘fn’ is a function reference).
$(“a”)
.bind(“focus”, fn)
.bind(“mouseover”, fn);
That isn’t terrible but it would be nice if we could write it like this.
$(“a”).bind(“focus mouseover”, fn);
Well, now we can! I just checked in an extension to the jQuery plugins repository that adds this functionality. It is pretty small and if you u…
Posted in jQuery with 5 comments
Monday, June 4, 2007
jQuery provides a method for wrapping an element with one or more elements. This is a really nice method but sometimes you need to wrap the contents of an element. Now you can do so with one method, innerWrap. The innerWrap method acts almost identical to the wrap method. The only real difference is that it wraps the contents of the element instead of the actual element.
Lets say I have a definition list that I want to unobtrusively enhance for users that have JavaScript enabled. The definition…
Posted in jQuery with 2 comments
Friday, June 1, 2007
Sometimes you just need to replace one element with another. Of course jQuery makes this easy! You might run this chain to replace one or more elements with a new one.
$(‘#myElem’)
.before(‘<p>test</p>’)
.remove();
This chain simply inserts a <p> tag before the selected element and then removes that element resulting in a replacement. You could also achieve the same results by using the after method instead of before.
As nice as that is, I would still prefer to have…
Posted in jQuery with 2 comments
Tuesday, May 29, 2007
So you finally got the opportunity to try out jQuery on one of your projects but you are already using a library that commands control of the infamous $ alias or function. Fear not, for no matter the reason the $ may be taken, jQuery is built to be compact and versatile. All of jQuery is contained within the jQuery namespace and the $ is just an alias for jQuery. So the following two lines of code will result in the same output.
jQuery(‘.myClass’).hide();
$(‘.myClass’).hide();
With this knowl…
Posted in jQuery with 2 comments
Tuesday, May 29, 2007
I have started adding documentation to this very blog for my jQuery plugins. You can find the first set of docs for the bgiframe plugin here.
And don’t forget to check out the great progress on the new jQuery Plugins site. You can see the bgiframe’s project site here. While your there feel free to rate it, grab the latest release, request a feature or report a bug.…
Posted in jQuery with 0 comments