I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the end of an article:

findLastLeaf = ($container) ->
  $children = $container.children()
  if $children.length == 0
    $container
  else
    $lastChild = $children.last()
    $lastContent = $container.contents().filter(->
      # Only return nodes that are either elements or non-empty text nodes
      @nodeType == 1 || (@nodeType == 3 && _.strip(@nodeValue) != '')
    ).last()
...

This trick might be useful to implement more complicated directives in AngularJS. I needed it to do drag'n'drop in a hierarchical tree.

Let's say you have this $scope in your Angular controller:

$scope.tasks = [
  { 'text': 'Task 1' },
  { 'text': 'Task 2' }
]

And you have this template:

<ul ng-repeat="task in tasks">
  <li>
    {{task.text}}
  </li>
</ul>

Which renders this HTML:

<ul>
  <li>Task 1</li>
  <li>Task 2</li>
</ul>

If you'd like to access the scope bound to the second <li> you can say this in jQ...

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

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

• The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
• I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
• The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
• For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
• There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...

CSS4 comes with :has. E.g. h1:has(b) would select all <h1> tags that contain a <b> tag.

This is implemented in no browser but the jQuery query engine already supports it as a custom extension.

Sometimes you need to dynamically load an image and do something as soon as its loaded (when for example its size is already available).

With jQuery, this seems to work across browsers:

$('<img>')
  .attr('src', '')
  .load(function() {
    alert('fully loaded!');
  })
  .attr('src', '/the/real/image/url');

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.

BubbleTree is a library for interactive visualization of hierarchical data. Originally developed mainly for spending data, the library is now completely independent from the OpenSpending platform. BubbleTree is built on top of jQuery and RaphaelJS.

See the Demo or the tutorial.

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";
}

Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after pseudo-element.

This makes me sad.

You can try using jQuery instead.

Imagine all the syntactical delights of Ruby and Haml for your JavaScript. You write in a nice language, but get normal JavaScript at runtime. All whilst having full access to 3rd-party JavaScript libraries (jQuery, PrototypeJS), debugging support (it becomes pure, readable JavaScript), existing support from test suites (it’s normal JavaScript) and growing support from various text editors (TextMate, Vim, Emacs).

From Rails 3.0.9, there is a method Hash#to_query that will turn a Hash into a query string:

>> {:a => "a", :b => ["c", "d", "e"]}.to_query
=> "a=a&b%5B%5D=c&b%5B%5D=d&b%5B%5D=e"
>> CGI.unescape _
=> "a=a&b[]=c&b[]=d&b[]=e"

If you're on the browser side, you can serialize nestd objects to query strings using jQuery's $.param.

jQuery plugin that makes it easy to dynamically add and remove records when using ActiveRecord's nested attributes.

jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.

Great look at the tradeoffs between progressive enhancement with jQuery or similiar, vs. client-side views.

jQuery plugin for equalizing the height or width of elements.

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

turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

I tested it successfully on Chrome, Firefox and IE9.

jQuery as new default Javascript library, streaming response support, attr_accessible with roles, prepared statements, easier migrations.

Asset pipeline, HTTP streaming, jQuery as default framework, auto-reversable migrations, identity map for ActiveRecord.

Ruby 1.8.x support will be dropped with or after Rails 4.

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

WKRTE is a jQuery rich text editor based on lwrte by plandem.