So you want to find out how many horizontal pixels you have available on a mobile device. This is super difficult because:

• Modern mobile devices have high-density displays where 1px in your CSS e.g. corresponds to 2.25, 4, ... physical pixels on the screen hardware.
• Difficult APIs
• Inconsistent APIs
• Screen orientation can change when the user rotates h...

Every time you call $(...) jQuery will create a new object. Because of this, comparing two jQuery collections with == will never return true, even when they are wrapping the same native DOM elements:

$('body') == $('body') // false

In order to test if two jQuery objects refer to the same native DOM elements, use is:

var $a = $('body');
var $b = $('body');
$a.is($b); // true

Jasmine equality matcher for jQuery

See [here](/makandra/34925-jasmine-testing-complex-types-for-e...

jQuery plugin for equalizing the height or width of elements.

Tracekit is a JavaScript library that automatically normalizes and exposes stack traces for unhandled exceptions across the 5 major browsers: IE, Firefox, Chrome, Safari, and Opera.

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.

jquery-timing is a very useful jquery plugin that helps to remove lots of nested anonymous functions. It's API provides you some methods that help you to write readable and understandable method chains. See yourself:

Example

// before
$('.some').show().children().doThat();
window.setTimeout(function(){
  $('some').children().doSomething().hide(function() {
    window.setTimeout(function() {
      otherStuffToDo();
    }, 1000);
  });
}, 500);

// after
$('.some').s...

The basic idea is pretty simple: an element's height is accessible via the offsetHeight property, its drawn height via scrollHeight -- if they are not the same, the browser shows scrollbars.

var hasScrollbars = element.scrollHeight != element.offsetHeight;

So, in order to say something like...

Then the element "#dialog_content" should not have scrollbars

... you can use this step (only for Selenium scenarios):

Then /^the element "([^\"]+)" should( not)? have scrollbars$/ do |selector, no_scrollbars|
  scroll_heig...

This works in all relevant browsers:

document.activeElement

You can use this in your Selenium steps, for example, to assert that a form field is or is not focused.

David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.

With the CSS in place you add a listener for your custom 'DOM changed' event and that's it!

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Freetile is a plugin for jQue­ry that en­ables the or­ganiza­tion of web­page con­tent in an ef­ficient, dynamic and re­spon­sive layout. It can be applied to a con­tain­er ele­ment and it will at­tempt to ar­range it's childr­en in a layout that makes opt­im­al use of scre­en space, by "pack­ing" them in a tight ar­range­ment

As the title says: this jQuery plugin creates bar charts from HTML tables. It comes in some different flavors.

Check the examples page: http://alphagov.github.com/magna-charta/.

Capybara gives you two different methods for executing Javascript:

page.evaluate_script("$('input').focus()")
page.execute_script("$('input').focus()")

While you can use both, the first line (with evaluate_script) might freeze your browser window for 10 seconds.

The reason is that evaluate_script will always return a result. The return value will be converted back to Ruby objects, which in case of complex objects (e.g. a jQuery collection) is very expensive.

Because of this we recommend to only use evaluate_script whe...

JavaScript engines such as Google’s V8 (Chrome, Node) are specifically designed for the fast execution of large JavaScript applications. As you develop, if you care about memory usage and performance, you should be aware of some of what’s going on in your user’s browser’s JavaScript engine behind the scenes.

gleeBox is an experimental project that takes a keyboard-centric approach to navigating the web. It provides alternatives to actions that are traditionally performed via the mouse. Some of these are radically more efficient than using a mouse, some not so much. In all cases, they are mostly meant for keyboard and command line lovers.

Gleebox is a terrific plugin that makes navigating through webpages a wink. It even allows for selecting by jQuery selector.

Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.

Makes a robust determination of a user's timezone through Javascript.

Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tail...

Many jQuery plugins suffer from a good plugin architecture. When you write jQuery plugins you should use the plugin pattern described in this article which makes your plugin highly customizable and extensible.

Related article with patterns for namespaced jquery plugins (more detailed)

If some of your JavaScripts fail on Internet Explorer, but only in staging or production environments, chances are that JavaScript compression is the culprit.

By default, Rails 3.2 compresses JavaScript with UglifyJS. I have seen a few cases where this actually breaks functioning JavaScript on IE (one example is the CKEditor).

I fixed this by switching to Yahoo's YUI Compressor.

To do this, do the following:

• replace the uglifier gem with the yui-compressor gem...