Pickadate. Any date. #

If you have need for a mobile-friendly, responsive, and lightweight jQuery date & time input picker, look no further than pickadate.js. Amsul pinged us to say that he just released version 3.4 of his popular library and is quite proud to say that pickadate.js is now ARIA-enabled. He states:

This is an update I would highly recommend everyone to get because of how crucial accessibility is.

If you’re already using pickadate.js, this is a great time to upgrade. If not, give it a look!

Add Instapaper-style footnotes to your site with Bigfoot #

Bigfoot is a nifty jQuery plugin that:

automatically detects the footnote link and content, turns the link into an easy-to-click button, and puts up a popover when the reader clicks on the footnote button

I installed Bigfoot on my blog and it Just Worked, which puts it in my Pantheon of awesome jQuery plugins. See it in action here and be sure to check out the sweet demo where you can try different styles.

parallax.js: bringing real movement to the web #

parallax.js is a lightweight parallax engine that responds to the movements from your smartphone’s gyroscope and motion detection. The tool lets you specify depths and directions that determine how your webscape responds to physical movement.

Creating layers is super simple, as documented:

Simply create a list of elements giving each item that you want to move within your parallax scene a class of layer and a data-depth attribute specifying its depth within the scene. A depth of 0 will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion.

Parallax.js is useable in jQuery and Zepto as a plugin, too.

MIT Licensed. Browse the source code on Github.

Easings.net helps select the right easing for an animation #

If you need help with selecting the right easing for an animation, Easings.net could be the help you’re looking for. It includes an explanation about easing, helpful animated graphs to visually demonstrate each easing as well as “how to” code for jQuery, Sass and CSS.

Since it’s open source, the tool has been forked and translated to European, Slavic and Asian languages.

Fork it and localize it to your language, or check out Easings.net to select the right easing for your next animation.

Twitter open-sources Typeahead.js, a jQuery auto-complete plugin #

From the announcement on the Twitter Engineering blog:

Twitter typeahead.js is a fast and battle-tested jQuery plugin for auto completion. Today we’re open sourcing the code on GitHub under the MIT license. By sharing a piece of our infrastructure with the open source community, we hope to evolve typeahead.js further with community input.

Sounds good to me! If you’re thinking ‘just another jQuery plugin’, you might want to take a look at its more advanced configuration options such as custom matching and ranking functions, international language support (including RTL and IME), and client/server mixed search data.

Check out the demo or peep the source code.

Discuss on Hacker news if you must.

jQuery.payment simplifies building credit card forms, validating inputs and formatting numbers with Stripe #

From their blog post:

A rising tide lifts all boats, and we’d like to help improve payment experiences for consumers everywhere, whether or not they use Stripe. Today, we’re releasing jQuery.payment, a general purpose library for building credit card forms, validating input, and formatting numbers. This library is behind a lot of the functionality in Checkout.

Check out Alex MacCaw‘s inaugural blog post for more details. You can also checkout the live demo to see jQuery.payment in action, as well as the source on GitHub.

BTW, we use Stripe to handle the payment processing for our memberships and we love it! Are you a member?

HT to Matt Vasquez for sharing with the Pure Charity team.

Chosen – jQuery plugin for user friendly select boxes #

Harvest, the team behind one of the earliest rails applications designed for business (rails 0.14.1), has a neat little project out there that helps “make unwieldy select boxes more friendly.” They call it Chosen, and it stays true to the motto “do one thing and do it well.”

After including jQuery (or Prototype), the Chosen stylesheet, and the appropriate plugin:

$(".some-select").chosen();

That’s it! You can now turn your boring old select boxes into:

After

Checkout the examples to see what else Chosen is capable of doing (and how good it looks doing it). You can also browse the source at GitHub.

Ziptastic – Python web service, jQuery plugin for choosing city, state based on ZIP Code #

Ziptastic is a small Python web service and jQuery plugin for looking up city and state information based on US postal code. If you’ve ever implemented a lookup like this in an app, you quickly discover the edge cases not limited to overlapping ZIP code boundaries and ZIP+4 formats.

Tools like Ziptastic work best when they suggest form values, not enforce them. Anybody who has ever been auto-tabbed to the next input field while entering a phone number or SSN knows what I’m talking about.

/via Joe Chrysler

SpacePen – Markaby-inspired CoffeeScript view framework for jQuery #

SpacePen from Nathan Sobo is a Markaby-inspired, CoffeeScript-powered DSL and view framework for jQuery. SpacePen combines view and controller into a single class:

class Spacecraft extends View
  @content: ->
    @div =>
      @h1 "Spacecraft"
      @ol =>
        @li "Apollo"
        @li "Soyuz"
        @li "Space Shuttle"


...

view = new Spacecraft
view.find('ol').append('<li>Star Destroyer</li>')

view.on 'click', 'li', ->
  alert "They clicked on #{$(this).text()}"

Check out the source on GitHub for more.

jQuery plugin for @mentions autocompletion #

screencap

A nifty jQuery plugin for providing Facebook/Twitter-like screen name autocomplete for that next great social network you’re building:

$('textarea.mention').mentionsInput({
  onDataRequest:function (mode, query, callback) {
    var data = [
      { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
    ];

    data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

    callback.call(this, data);
  }
});

Check out the project page for options or grab the source.

jribbble, a jQuery plugin for the Dribbble API #

What do you when you want to work with the Dribbble API in your website?

Check this out …

jribbble,

What can it do?

  1. Get a shot
  2. Get the comments of a shot
  3. Get the rebbbounds of a shot
  4. Get a list of shots by the list name
  5. Get a list of a player’s shots
  6. Get a list of shots a player is following
  7. Get the profile details of a player
  8. Get the followers of a player
  9. Get the players a player is following
  10. Get the draftees of a player

[Source on GitHub] [Homepage]

jQuery-lifestream: Aggregate all your social activity with JavaScript #

As Zeldman observed over three years ago, we’re farming out our online presence to a growing number of social networks. This fragmentation means it’s getting harder to see all of our online activity in one spot. If you’re looking for an easy way to pull all your tweets, likes, checkins, and even GitHub activity together in one spot, check out jQuery Lifestream from Christian Vuerings.

Installation and usage

To use the plugin, in addition to the jQuery dependency, you’ll need to add the script to your page along with some configuration with your social network account information.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://raw.github.com/christianv/jquery-lifestream/master/jquery.lifestream-compiled.js"></script>
<script>
  $("#lifestream").lifestream({
    list:[
      {
        service: "github",
        user: "pengwynn"
      },
      {
        service: "twitter",
        user: "pengwynn"
      }
    ]
  });
</script>

Here’s a preview of my own personal GitHub and Twitter stream:

$(“#lifestream”).lifestream({
list:[
{
service: “github”,
user: “pengwynn”
},
{
service: “twitter”,
user: “pengwynn”
}
]
});

One of the great things about jQuery Lifestream is that it supports jQuery templates so that you can customize how each feed item is displayed:

{
  service: 'deviantart',
  user: 'gabbyd70',
  template: {
    deviationpost: 'heeft hetvolgende gepost: <a href="${url}">${title}</a>'
  }
}

jQuery Lifestream supports a long list of feed sources:

Christian has created a nice demo page that lets you enter your social network usernames and preview your own lifestream.

If you don’t see your favorite site in the list, check out the README for contribution guides and advanced usage.

[Source on GitHub] [Follow @jq_lifestream on Twitter for updates]

Episode 0.5.7 – Amplify.js with Mike Hostetler and Scott González from AppendTo

Wynn caught up with Mike Hostetler and Scott González from AppendTo to talk about Amplify.js, jQuery, CoffeeScript, Microsoft, the web, and open source. Items mentioned in the show: AppendTo offers training and consulting for jQuery. Amplify.js is a set of components designed to solve common web application problems with a simplistic API. Mike Hostetler is […]

sausage: Contextual pagination for jQuery #

Not everything that extends $ is money, so it’s rare we cover jQuery plugins. However, Sausage from Christopher Cliff has a unique take on pagination:

screencap

Sausage is meant to be used with infinite (or at least long) scrolling pages and adds pagination markers to the margin. For a real-world example, check out how Sausage enhances the online version of CouchDB The Definitive Guide with just the following code:

$(window)
    .sausage({
        content: function (i, $page) {
            return '<span class="sausage-span">'
                + $page.find('.anchor').first().text()
                + '</span>';
        }
    })
    ;

For more information or examples, check the web site or examples in the project. Be sure and follow @SausageJS for updates.

[Source on GitHub]

reveal: jQuery modal for HTML5 and data attributes #

The Zurb team has long pushed the envelope of CSS3. Now they’ve released a simple plugin for jQuery that uses HTML5 data attributes to wire up links to modal dialogs. To use, you’ll need jQuery, the plugin, and the base CSS:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

To create a dialog, just create a <div> with a reveal-modal class and an ID:

<div id="theModal" class="reveal-modal">
    <h1>Listen to the Changelog</h1>
    <p class="lead">The Changelog is hands-down the best Open Source podcast on the interwebs.</p>
    <a class="close-reveal-modal">×</a>
</div>

Screencap

Now, we just need a link or button to open the dialog, wiring up via the data-reveal-id attribute:

<a href="#" data-reveal-id="theModal">What's the greatest tech podcast?</a>

Reveal also supports advanced options such as animation, animation speed, and close button behavior, specified in additional data-* attributes:

<a href="#" data-reveal-id="theModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">What's the greatest tech podcast?</a>

If you like Reveal, be sure and check out Orbit, a slick jQuery content slider plugin.

[Source on GitHub] [Reveal project page]

jQuery 1.5 released, now with Deferred Objects #

jQuery 1.5 has dropped and is making its way to a CDN near you. This release sports a completely re-written Ajax module.

Also new in 1.5 are Deferred Objects, a chainable utility object to manage multiple callback queues for both synchronous an asynchronous functions akin to CommonJS Promises.

// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jxhr.complete(function(){ alert("second complete"); });

For more release details, be sure and check out John Resig’s blog post. Also catch John on Episode 0.2.8 if you missed it.

[Source on GitHub] [Blog post]

jquery-facebook-multi-friend-selector: A jQuery Facebook Multi-Friend Selector using the Graph API #

jQuery Facebook Multi-Friend Selector is a jQuery plugin created by Mike Brevoort that stands as an alternative for Facebook Multi-Friend Selection user interface that uses the Facebook Graph API. No server side component is necessary which makes it really easy to adapt and use.

Customization

This plugin depends on the new Facebook Javascript API, and inside the project there’s a jQuery plugin and accompanying CSS file to get you started.

You should be able to customize the look of this plugin quite a bit via CSS. For example, check out this stripped down demo to see a stacked list type selector vs the later demo we’ll mention.

Usage

Add this selector #jfmfs-container to your document and include the Facebook JavaScript API. Log in your user (FB.init and FB.login) and you will be able to load the friend selector. Check out the video below for a word from Mike on how things work.

For example:

$("#jfmfs-container").jfmfs();

This will pull back the current user’s friends and create the interface to select friends. When you’re ready to move on, there is a function you’ll need to call to return an array of the Facebook IDs of the selected friends.

var friendSelector = $("#jfmfs-container").data('jfmfs');
var selectedFriends = friendSelector.getSelectedIds();

Demo

If you want to get right to it and see a live demo, check out this demo of the jQuery Facebook Multi-Friend Selector plugin. Click “login” and then login to your Facebook account. You will then be able to see your list of friends in the friend selector.

jquery-facebook-multi-friend-selector-screenshot.png

For more details, check out this blog post and screencast.

[Source on GitHub] [Demo] [Discuss on Hacker News]

Episode 0.4.2 – Rails 3.1 and SproutCore with Yehuda Katz

Adam and Wynn caught up with Yehuda Katz to talk about upcoming changes in Rails 3.1, SproutCore, and his growing list of open source projects. Items mentioned in the show: Wynn’s deck from ‘07 pays tribute to Yehuda Merb influenced and later merged with Rails SproutCore is an HTML5 application framework for building responsive, desktop-caliber […]

Episode 0.4.1 – Telephony with Chris Matthieu

Wynn caught up with Chris Matthieu of Voxeo Labs to talk about Phono, Tropo, Adhearsion, and building telephony apps with open source tools. Items mentioned in the show: We’re excited to team up with GitHub Jobs! To have your job posting read on air, just check “Advertise this listing on The Changelog Podcast for an […]

h5Validate: HTML5 Form Validation for jQuery #

h5Validate is a jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don’t yet support HTML5.

In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation.

For demo and usage, see the h5Validate homepage.

Jump Start

Copy and paste this at the end of the body on any page with an HTML5 form. If html5 validation rules exist in the form, you’re in business!

<script src="lib/jquery/jquery-1.4.2.min.js"></script>
<script src="jquery.h5validate.js"></script>

<script>
$(document).ready(function () {
    $('form').h5Validate();
});
</script>

h5Validate is sponsored by Zumba Fitness and Rese Property Management

[Source on GitHub] [Homepage & Demo]

WatchWednesday for 20101103

Our weekly list of projects you might have missed on GitHub: RestKit RestKit is a nice high-level library for consuming REST resources in Objective C. It runs on OS X and iOS and provides three major features: Network transport including GET, POST, PUT, and DELETE Object mapping between JSON responses and local domain types, in […]

Watch Wednesday for 20101027

After a week off, another Watch Wednesday, full of projects you might have missed on GitHub. endtwist / AjaxIM Ajax IM is an open-source, extensible, theme-able instant messaging framework, powered by Node.js. offmessage /portify Portify is a Python utility to transcode your music collection between Ogg, Flac, and MP3. janlelis / irbtools IRB Tools is […]

Faded: super simple fading image and content viewer for jQuery #

I love when software is super simple …

Faded is a super simple fading image and content viewer for jQuery by Nathan Searles. It’s Easy to setup and design to YOUR specifications.

It features:

  • auto generated pagination
  • an awesome sequential image loader
  • fancy crossfading
  • essentially no CSS required
  • a number of custom options for you to set (if you’d like)

Markup for content

<div id="faded">
  <ul>
    <li>Slide 1 Copy</li>
    <li>Slide 2 Copy</li>
    <li>Slide 3 Copy</li>
    <li>Slide 4 Copy</li>
  </ul>
  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

Markup for images

<div id="faded">
  <div>
    <img src="01.jpg" alt="" />
    <img src="02.jpg" alt="" />
    <img src="03.jpg" alt="" />
    <img src="04.jpg" alt="" />
  </div>
  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

Initialize

<script type="text/javascript" charset="utf-8">
  $(function(){
    $("#faded").faded();
  });
</script>

Defaults

speed: 300, // sets animation speed.
crossfade: false, // crossfades content.
bigtarget: false, // click content for next.
loading: false, // for images only, checks if first image is loaded before showing it.
autoheight: false, // auto adjust height.
pagination: "pagination", // sets true and class name for pagination. set to false to disable this feature.
autopagination: true, // set to true to auto generate pagination.
nextbtn: "next", // next button class.
prevbtn: "prev", // previous button class.
loadingimg: false, // location of loading image (e.g."/img/loading.gif") if using loading.
autoplay: false, // auto play of content. set to positive number for true. also sets time interval. use 1000 for 1 second.
autorestart: false, // auto restart if auto play stopped. set to positive number for true. also sets time interval. use 1000 for 1 second.
random: false // set to true to randomize order

Check out the codes & demo

[Source on GitHub] [Demo]