To help you get your head around the reams of new information, I’ve created a neat-o reference app for your iPhone – so now you’ve got no excuse not to know what jQuery.noop, .nextUntil(), or .unwrap() does!

To install it, go here on your iPhone then click “+” and “Add to Home Screen” for fullscreen app-y goodness.

Please note! there are about 350 files to download, so installing will take a couple of minutes – and during those couple of minutes you can’t let your phone fall asleep else Freddy will come your phone’s WiFi will turn off and the files won’t be cached.

The application uses the jQuery touch plugin to appear all native-y, and the offline abilities of HTML5 to store the data for when you feel like reading jQuery docs on the bus.

The material is taken from the new docs – which are being changed a lot at the moment, so I’ll update this thing again when it all settles down a bit (I won’t be doing constant updates, because I don’t think you can invalidate individual files in the cache manifest, so you have to get all 350 files again for any changes).

I’m sure that at the moment some methods that will be missing or incomplete – because of my dodgy parsing, changing docs, and poor QA skills… fixed in the next version fo’ sure ;)

That’s it… go to http://www.mrspeaker.net/dev/jq/ref/ on your iPhone then click the “+” button and “Add to Home Screen” to install.

Say we have an unordered list of items:

<ul id="tags">
	<li>jQuery</li>
	<li>Javascript</li>
	<li>reference</li>
	...
</ul>

The user can click on a list item to select it. When a click happens, we need to find out what the item’s index is, relative to all its siblings….

$("#tags li").click(function(){
    alert( "Hi, I'm element " + $(this).index() );
});

That’s all there is to it. Super useful!

See the wonders of HTML5 Canvas!!

(here’s a proof-of-concept version as an offline iPhone Web app)

After updating an old JavaScript platformer to work on the iPhone, I decided to step it up a notch. A full-featured Particle System: lots of particles, lots of colours, lots of fluffy clouds of pixels! I ported the 71Squared Particle Emitter code pretty-much directly: in fact, a bunch of it was straight copy/paste – I just had to change “->” to “.”. Well, mostly.

…actually, the real reason for this undertaking was because I just learned about the “lighter” value for the canvas globalCompositeOperation. In this mode, when you draw two things on top of each other the overlapping area will become lighter. Which makes the particles look fully-sick.

The particle system itself is straightforward enough, so I thought I’d tack on a couple of extra bits – I added a couple of extra parameters, made it bouncy, and also let you (kind of) save and load data. If you click the save icon you can copy/paste out the current parameters – and as an added bonus, the data is a very re-tweetable form.

“Why would you tweet it?” you ask, incredulously. Well… if you click the “Twitter” button, then it will search Twitter’s public search service for saved “files”: these are just tweets with lots of numbers and the #parcycle hash tag. Any saved settings get loaded them into the example containers, so you can see what other people have made. Pretty groovy – annnd, I don’t have to worry about writing any server-side nonsense. Win-win!

I’m going to write a cut-down version for use on future iPhone Web games. Even my dodgy first-pass seems to function reasonably well with a hand-full of particles: with some optimizing it should be good enough to get rid of objective-c forever!*

So anyway, go See the wonders of HTML5 Canvas!!

*No.

It doesn’t use the HTML5 client storage stuff (yet) Thanks to the damn-cool offline-storage stuff it works off-line, but it doesn’t do nice rotation handling (yet)… I fixed the controls – by adding two “d-pads” instead of swipes – and made it all landscapey. To use it on the iPhone or iPod Touch you should browse to the game then add it to your home screen.

Go play!

(Also, if anyone wants to take the tiles.png file and the characters.png file and make the game not look so crap… that’d be awesome!)

(Also, also, I just thought I’d point out that my game was called “Some adventure guy” since before Pie Guy existed. Promise I didn’t steal it. Promise.

We all know that you can grab attribute values using jQuery’s attr method. For example, to check if a checkbox is checked you check the checkbox’s checked, um, value:
var checked = $("chkNoMail").attr("checked");
And, of course, to set attributes we simply pass the value in as the second parameter: $("<div></div>").attr("id", "myDiv1");
Ok, ok… buuuut, there’s also another version of the attr method that accepts not a lowly string… but a mighty function!

The function can implement whatever logic you want, but it needs to return the value that you want the attribute to have. For example, if you want to invert the “selected” values of a multi-select box:

$("selBox").children()
		.attr( "selected", function(){
			return !$(this).attr( "selected" );
		});

Nice! Certainly saves us an extra .each call, and keeps your jQuery gravy-train going. It can also be used to add IDs to a bunch of elements you need to ID:

$("div").attr( "id", function( i ){
	return "myDiv" + i;
}

End tip.

Ok, here’s something you’ll want to refer to daily… the current status of the jQuery 1.4 “TODO list”, or as I like to call it, “Report 37“. Usually when people on the jQuery dev lists ask “When will jQuery 1.4 be ready?” they are met with a resigned (resigned not resiged) answer: “When it’s ready”. But we don’t have to take that kind of glib-ness anymore…

Now we can go and consult good ol’ Report 37 any time we need an ETA on 1.4. The method is simple: when all the red and white stripes turn light blue – then jQuery’s ready to go! Of course, looking at all those lines takes up precious time and brain space – so I’ve compacted the data into a single image, so you can see how things are going at a glance.

Assuming this page has completed loading without JavaScript errors (a big assumption), you should see the Licorice Allsort graph to the right. The black lines mark the different components of the jQuery build: Ajax, Core, Event, FX, etc… The coloured lines are the status of the tickets. We want everything to turn blue, if only so there isn’t so much pink on my blog.

To make the pretty pictures, I grab the report once a day, and dump it on my server. Then your browser goes all jQuery on it – loading it in and extracting relevant colour information. Then the super awesome Raphael SVG library makes some pixels, and we all have a cup of tea.

Of course, you won’t have “1000″ popping up… you’ll have “added” or “removed” or “dugggg” or something a bit useful to the end user. I don’t care about end users, so I’ll have “1000″.

In the spirit of trying to get the effect to take over the web, I thought I’d throw together a jQuery plugin for sticking them on your site. The jquery.oneup.js plugin is very straightforward – it just animates an element upwards while fading out: 1UP style! To use it, just make your typical notification element position:relative, or position:absolute – whatever it takes to make it movable! (I’ll fix this in the next version). For the demo, I’ve styled my notification message like so:

...
<input type="submit" id="go" value="go" />
<span id="loadn">load</span>
...
#loadn{
	position:relative;
	left:-30px;
	top:-4px;
	display:none;
}

The element then sits "invisibled" over the "go" button, ready to fly... Next we wire up our 1UP functionality with the plugin:

$("#go").click(function(){
	$("#loadn").oneUp();
});

YES! That is so cool: check it in action. The plugin accepts parameters speed (as a jQuery time - like, 'slow', 'fast' or 1000) and distance (how many pixels it travels upwards). You can also specify a callback if you need to do something after the notification completes (like in the demo).

Well, I'm pretty stoked with this turn of events. I've got to go back through every single site I've ever done and add way-too-many of these lil' fellows in. The jquery.oneup.js plugin needs a bit of work: so it handles positioning all by itself, and so forth... I'll let you know as soon as that's done. But in the mean time, I've got a highscore to go beat...