jQuery Tutorials

  • AJAX jQuery

    jQuery: Multiple AJAX and JSON Requests, One Callback

    I've been working on a new feature for the Mozilla Developer Network which requires loading of a basic script file as well as a JSON stream.  Since we use jQuery, that means a jQuery.getScript and a jQuery.getJSON.  I know those both work asyncronously and return a Deferred, so I wondered if there was a way that I could load them in parallel with one callback, much the way JavaScript loaders like curljs do.  I was in luck!  Using jQuery.when, I can load both requests concurrently with one callback!

    Read Post
  • JavaScript jQuery

    DO NOT TRIGGER REAL EVENT NAMES WITH JQUERY!

    Sometimes JavaScript toolkits give us so much functionality that we can get hung by it if we're not careful.  The more functionality that we use within a toolkit, the more opportunity there is to have one set of changes or additions affect another.  That's especially true as you maintain your code over a period of years.  One mistake I often see is the use of jQuery's trigger, a method which allows developers to trigger a registered event.  It's great that you can do that but DO NOT TRIGGER REAL EVENT NAMES!

    Read Post
  • JavaScript jQuery

    Loading Scripts with jQuery

    JavaScript loaders are incredibly powerful and useful utilities.  I've even covered a few of them on this blog, like curljs and LABjs, and have used RequireJS and the Dojo loader on personal projects.  They're super powerful but can be overkill in some cases.  If you're using jQuery, there's a built in method for loading a single script which may come in handy if you'd like to lazy load a plugin or any other type of script.  Here's how to use it!

    Read Post
  • CSS JavaScript jQuery MooTools Theory / Ideas

    5 Best Practice Mentalities to Get Over

    Every developers strives to write clean, maintainable, and functional code, whether they hack on the server side or dabble on the client side. Over the last few decades of the web, we've learned from some of our early mistakes and formed a site of always changing best practices. These best practices usually keep us out of trouble but some of them are taken way too literally, to the point where developers become too rigid and borderline crippled by them. Truth be told, with these best practices are mostly good to follow, they're broken not out complacency but by necessity. Here are five best practices that aren't quite as realistic as we'd like to think.

    Read Post
  • Demos jQuery Markup

    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the effort that went into creating that design, both on the server and client sides.  That's why I've fallen in love with Wookmark, a jQuery plugin to create the same consistent layout effect with imagery.

    Read Post View Demo
  • CSS CSS Animations Demos Firefox OS jQuery Mobile

    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The partners website also  launched with an awesome Firefox animation that I couldn't pass up the opportunity to write about — let me show you how it was created!

    Read Post View Demo
  • CSS CSS Animations jQuery Markup

    Build a Street Fighter Demo with CSS Animations and JavaScript

    I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite.

    Read Post
  • Get the jQuery Version

  • JavaScript jQuery

    Create and Retrieve Nested Objects with jQuery

    The ability to create and retrieve nested objects by objectified string path is incredibly useful.  Not only do you not need to do the manual string of object/property checks to avoid "{x} is not defined" errors, but if you create your method properly, you can also set an empty object in its given place (or namespace, some would call it.    Here's how you can add this functionality to the jQuery object.

    Read Post
  • .htaccess AJAX JavaScript jQuery Markup

    IFRAME Permission Denied Solution

    I was recently rolling my own AJAX upload script, posting a form to a hidden IFRAME and using the load event to know when the upload was complete.  When the upload completed, I wanted to access the IFRAME content so I could verify that the upload completed successfully.  Surprisingly I ran into the following JavaScript error...

    Read Post