JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

JavaScript Garden does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended in order to understand the topics covered in this guide

jQuery offers many different methods to move a selection through the DOM tree. These are the most important:

$element.find(selector)
Get the descendants of each element in the current set of matched elements, filtered by a selector. Does not find the current element, even it matches. If you wanted to do that, you need to write $element.find(selector).addBack(selector).

$element.closest(selector)
Get the first ancestor el...

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. 

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not see "foobear"

This is because the Rack::Test driver does not know if an element is visible, and only looks at the DOM.

Spreewald offers steps to check that an element is hidden by CSS:

Then "foo" should be hidden

You can also check that an el...

Flash movies (.swf files) can talk with Javascript code embedded in the same HTML page. There are two ways to do this:

• The preferred way is to use the ExternalInterface class to call Javascript functions from ActionScript, and to bind ActionScript functions to the Flash movie's DOM element so they can be called from Javascript.
• The deprecated way is to use the global [fscommand](http://help.adobe....

Javascript that implements client-side hyphenation of HTML-Documents.

You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.

Though all major browsers offer inspection tools you may like the Firebug style. Also, for me this is a lot better than the IE8 developer tools -- and it works in older versions of IE, too.

Get the bookmarklet over at http://getfirebug.com/firebuglite#Stable. It usually loads the JavaScript code from a remote server but you can also download it to have it run locally. If adding the bookmarklet does not work in IE, add a new book...

jQuery plugin to register callback functions to keyboard shortkuts. Keyboard events in vanilla Javascripts are super-painful to work with, so hopefully this library can help.

The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications.

You can use these step definitions:

Then /^I should not see an error$/ do
  (200 .. 399).should include(page.status_code)
end

Then /^I should see an error$/ do
  (400 .. 599).should include(page.status_code)
end

Note that you need to tag the scenario with @allow-rescue to test that an error is shown like this

@allow-rescue
Scenario: Accessing the admin area requires a login
  When I go to the admin area
  Then I should see an error

These step definitions will not work for @javascript scena...

jQuery's selector engine, live()-like event handlers, pixel-perfect layout measuring.

Selenium has been the siren song that continually calls out to us. Unfortunately, in practice we’ve been unable to get Selenium to run reliably for real applications, on both developers machines and on the continuous integration server. This failure with Selenium has caused us to search for alternative solutions

Added utility methods for the Prototype Javascript framework.

This is non-trivial because you need to fake event objects and require different code for different browsers. Luckily, there is tool support for most types of events.

In jQuery you can say:

$('a#close_window').click();

In Prototype you can use event.simulate.js from the Protolicious library to say:

$$('a#close_window')[0].simulate('click');

To trigger custom events with Prototype, you can use the [built-in Element.fire()](http://api.prototypejs.org/dom/...

There is a problem with AJAX response handling for Rails 3 remote links and forms in Internet Explorer. This problem affects applications still using jQuery 1.4.2.

Compresses JavaScript.

Thanks to habits engrained by Rails 2’s link_to_remote and remote_form_for, we expect that Rails 3 would also handle the AJAX response for our remote links and forms. But it doesn’t; it leaves that for you.

Terminus is a Capybara driver where most of the driver functions are implemented in client-side JavaScript. It lets you script any browser on any machine using the Capybara API, without any browser plugins or extensions.

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker (jQueryUI) is required for using any of these. In addition all datepicker options are still available through the timepicker addon.

If you have several submit elements (inputs or buttons with type="submit") that each cause different things to happen (e.g. you might have a button that sends an extra attribute) you might run into trouble when submitting the form by pressing the return key in a field.

When nothing fancy like a tabindex is defined it seems as if the first submit element inside a form is chosen (and has its attributes submitted) when pressing return.\
So, if possible, put your "default" (aka least harmful) submit element before others.

NB: If you s...

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover

A jQuery plugin that sets a div or span to show a countdown to a given time