If you open a pop-up window [1] in your Selenium tests and you want to close it, you can do this:

# Find our target window
handle = page.driver.find_window("My window title")

# Close it
page.driver.browser.switch_to.window(handle)
page.driver.browser.close

# Have the Selenium driver point to another window
last_handle = page.driver.browser.window_handles.last
page.driver.browser.switch_to.window(last_handle)

Mind these:

• find_window returns a window handle, which is something like `"{485fa8bd-fa99-...

This error can happen in Ruby 1.9.

To fix it, add the following line to the top of your .js.erb file:

<%# @encoding: UTF-8 %>

JavaScripts and CSS should be minified for production use.

In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.

In Rails 2.3 and 3.0 you should at least embed external JavaScript libraries in minified form, using something like JavaScript compressor.

If you need to capture signatures on an IPad or similar device, you can use Thomas J Bradley's excellent Signature Pad plugin for jQuery.

To implement, just follow the steps on the Github page.

The form

If you have a model Signature with name: string, signature: text, you can use it with regular rails form like this:

- form_for @signature, :html => { :class => 'signature_form' } do |form|
  %dl
    %dt
      = form...

This works well in the simplified case, when your link disappears after it was clicked.

Let link_to_remote behave as „disabled“ after the first click. Use the :before hook to replace the orignal link with a link that does nothing but looks like the original link:

:ruby
  label = "do_something"
  dummy_link = link_to(label)
  other_attributes_hash = { :url => ..., :method => ..., ... }
  
  disable_link_option = { :before => "$('your_link_selector').html('#{escape_javascript(dummy_link)}'" } # jquery

= link_to_remote(label, other_att...

A tooltip library that does not use Javascript. Works in IE9+.

This library (or the technique used by it) could be a great choice for projects with a lot of tooltips, which are hard to do fast with Javascript.

Spreewald now comes with a step that tests if a form field is visible:

Then the "Due date" field should be visible
But the "Author" field should not be visible

The step works by looking up the field for the given label, then checks if that field is hidden via CSS (or Javascript).

It is not currently tested if the label is visible or hidden. For this see: [Check that an element is visible or hidden via CSS with Cucumber/Capybara](https://makandracards.com/makandra/1049-check-that-an-elem...

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. Features include:

• Custom Code/Behavior Fencing
• Hard and Soft Tabs
• Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes
• Auto delete a paired character
• Overwrite a paired character
• Multi-line Indentation/Unindentation
• Automatic Indentation

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

The attached article outlines considerations when choosing client-side vs. server-side implementations of the Google Geocoding APIs (geocoder, directions, not maps drawing). The main points are:

• On the server side you only get a fixed daily request quota
• On the client side the quota is per-client, so basically unlimited
• When implementing APIs on the server-side, be aware that quota is measured by IP. When hosting in the cloud **you don't always know which other services might...

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...