Ajax Upload XHR2, Take 2

html5 logo

It’s a pleasure to be able to interact with files in the browser at long last, isn’t it? Reading files in without needing to bounce them against the server first opens up a lot of possibilities – and getting progress from a chunked ajax upload is miles away from the indeterminate form uploads of days past.

Last time we touched this subject, I shared an (admittedly rough) jQuery plugin that allowed you to enjoy HTML5 ajax uploading and file reading with the familiar event interface, and convert any element into a drag-and-drop target.

At the request of reader Mateusz, let’s revisit our HUp plugin, and polish it up a little by adding a new feature – the ability to filter files to be read/uploaded by their file size, and/or their mime-type.

(more…)

Popcorn, Popup, Popup Videos, Video Annotations, Bring Me Back to Data

Photo of popcorn by Martin Abegglen on Flickr

Thanks to Jimmy Fallon and the Mets bucket hat guy, I’ve found myself stringing together random word associations like this, which is where this title came from.  But honestly, the last thing I would associate with popcorn is a javascript media library.  So I guess random associations is the thing to do.  To be clear, this is not the kind of popcorning made famous by Rob Drydek (MTV’s Ridiculousness) which describes hiding an airbag under an unsuspecting person’s seat and deploying it, sending the poor victim on a quick ride skyward.  This is the kind of popcorn that allows making video annotations (ala VH1’s Popup Videos circa 1980) easy to do.   That’s popcorn.js.

(more…)

jQuery Ajax Blobs and Array Buffers

Image of aliens

A big part of what makes jQuery a regular part of so many web projects is the clean interface it offers us for a number of sometimes messy built-in aspects of javascript. The most obvious is the DOM interface; and in second place, jquery ajax and its various shorthand methods. Abstracting away the difference between ActiveXObject and XMLHttpRequest is one of the most obvious benefits – but even if you don’t need to worry about supporting old versions of IE, you might well enjoy the clean, object-based, promise-returning interface that jquery ajax offers.

It’s a shame then, that if you want to take advantage of XMLHttpRequest Level 2 features like Blob and ArrayBuffer uploading/downloading, you have to fall back to the standard javascript api.

Let’s fix that, shall we?

(more…)

jQuery Mobile Transitions: Static vs Dynamic Content. Part II

jQuery MobilejQuery Mobile is a web application framework designed primarily for making sites interact well on smartphones and tablets. However, many of the features are useful for interaction across all devices. This series is focusing on the page transition effects included with jQuery Mobile.

In Part I of this series, I introduced a basic two page site and then integrated jQuery Mobile to create a sliding transition between the two pages. The first step was to include all page elements in the transition. The next step, which is covered in this post, is to perform the transition with some static content; some specific elements not included in the transition effect.

(more…)