Tag Archive for javascript

Developing a Cross-Platform HTML5 Offline App – Part 1

Update 2014-02-25

Help request!

Hey folks.  I seem to get a fair amount of traffic to this page from Stack Overflow.  This is great, except that I haven’t updated this post in 3 years, so the data is woefully out of date.  It would be nice if developers that came here looking for this data weren’t given Firefox 4 Beta stats.  So if you’ve tested a current browser’s offline storage limit, post it as a comment and I’ll add it to the table.  If you want to help but don’t know how to test this, let me know.  If I get enough requests / find some time I’ll put together a testing page.


HTML5 Powered with CSS3 / Styling, Multimedia, and Offline & StorageI’ve been working on an HTML5 offline app for just over a year now.  Yes, the same app.  It hasn’t been dedicated time, but the development has dragged on for awhile now.  Primarily this has been due to the production of data (there’s a lot of data), though many delays have been caused by the developing spec and its idiosyncrasies across browsers.  So, I decided to write a multi-part series in what it’s taken to get this app out the door (which it isn’t yet, but by the time I finish this series it should be).

When all is said and done, this app should run on Windows, OS X (Mac), Linux, iOS (iPhone/iPad/iPod Touch) and Android.

This first part is just an introduction to what’s involved and will mostly be fluff.  The meat of it won’t start until part 2.

Determining State with jQuery UI Accordion

It’s quite simple really, but it’s not documented and it took me a little time to figure out, so I figured I’d share.

The basic HTML structure of the clickable portion of the accordion is:

<h3>
	<a>...</a>
</h3>

So when you’re creating your code, the easiest way is to assign a class to the <a> element like so:

<h3>
	<a class="my_accordion">...</a>
</h3>

jQuery UI is nice in that it assigns different classes to the <h3> element based on its state. So then you can just use the following jQuery to determine whether or not it’s open.

if($('.my_accordion').parent('h3').hasClass('ui-state-active')) {
	// accordion is open
}
else {
	// accordion is closed
}

There’s also ‘ui-state-default’ and ‘ui-state-hover’, and probably others as well.

Google Translate API v2 Breakage

I guess there’s a reason not to use Google products when they’re listed as “labs”. I was just doing some work on reTranslate, and it just kept breaking. Turns out that Google changed the object that gets returned to the callback function. It used to be:

response.data.translations[0].translatedText

But now it’s:

response.data.translations[0].translated_text

Interestingly, it looks like they haven’t updated their documentation… so probably now that I’ve made this fix they’re going to revert it tomorrow. What a PITA.