I know jQuery. Now what?

Remy Sharp on his stance to not include jQuery by default anymore:

The point is that today we have features natively available, and I’m trying to consider my audience before dropping in jQuery by default

Yet again one of the reasons why I teach my students bare/vanilla JS next to learning them to work with jQuery.

I know jQuery. Now what? →

SlabText — A jQuery Plugin for producing big, bold & responsive headlines

Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text

SlabText Demo →

jQuery Stick ‘em

jQuery plugin to mimic the new and upcoming CSS position: sticky;

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

jQuery Stick’em Demo →
jQuery Stick’em Source (GitHub) →
position: sticky; lands in Webkit →

jQuery Transit

jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

Include the plugin and you can use code like this to perform transformations:

$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

To animate use use $.fn.transition instead of jQuery’s $.fn.animate:

$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Works fine in all browsers that support it (be it prefixed, or unprefixed)

jQuery Transit →

Note that this plugin will become obsolete once the new animation code lands in jQuery 1.8


jQuery++ is a collection of extremely useful DOM helpers and special events for jQuery. jQuery++ is all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, jQuery++ is jQuery’s bald-spot covering toupee.

Some handy additions, yet I’m wondering why they provide an override of $.fn.animate() instead of pushing the changes into the jQuery core itself.

jQuery++ →