Sam Croft

Full-stack developer

Using JavaScript's transitionend event to maintain event control when handling sequential CSS transitions in a PhoneGap app

  • 12 comments

Filed in: Cordova, javascript, jQuery, PhoneGap, Uncategorized

It’s pretty simple to create animations with CSS3’s transition and animation properties. And the ability to hardware accelerate these effects gives you a lot of power to create a PhoneGap app UI with a native feel.

One issue I sometimes run into is firing an event after a transition has completed and/or chaining multiple transitions to occur one after another while keeping event control at the same time. I’m not talking about an overly complex series of animations, I just mean dealing with a couple of a transitions that occur one after another. There are two methods that I use in these situations.

(more…)

My article for Adobe's Appliness magazine: Loading data into, and posting data from, a PhoneGap app

  • 53 comments

Filed in: android, apps, Cordova, iOS, jQuery, JSON, MySQL, PhoneGap, php, Uncategorized, zepto

In September we tweeted a photo at RITH of a PhoneGap app we’d been working on. The photo showed the app running on quite a few iOS and Android phones and an iPad. One HTML5 app, running perfectly on many devices, all with different resolutions and pixel densities.

UniApp running on iPhone and Android phones and an iPad

Following a retweet by PhoneGap we were contacted by Adobe’s new magazine, Appliness, to see if we’d like to write an article for their October issue. I jumped at the chance.

(more…)

How to elegantly handle errors in a PhoneGap app by using device API native notifications

  • 26 comments

Filed in: android, apps, Cordova, iOS, jQuery, PhoneGap, Uncategorized

Making use of the device API is what makes PhoneGap so brilliant. What’s equally brilliant is how simple it is to integrate some of these functions within your app.

One of these functions is the native notification which can be used in place of, or in addition to, any error messages that you might need to display in your app.

(more…)

Posting data from a PhoneGap app to a server using jQuery

  • 186 comments

Filed in: android, forms, iOS, jQuery, MySQL, PhoneGap, php, Uncategorized

Recently I’ve had several requests to create an article about posting data to a server from a PhoneGap app so I thought I’d cover the steps I go through when dealing with this kind of requirement.

The method is extremely simple providing a few important steps are followed.

(more…)

Updated: loading external data into an iOS PhoneGap app using jQuery 1.5

  • 371 comments

Filed in: iOS, jQuery, JSON, MySQL, PhoneGap, php, Uncategorized

Update: Following the release of PhoneGap 1.0 and XCode 4 I have updated the Git repository to include a version built with PhoneGap 0.9x (the original version) and a separate version for PhoneGap 1.xx+.

Update: Due to some issues with the recent versions of Cordova I have updated the Git repository to also include a version built with Cordova 1.7.0.

My 2010 post about loading data into a PhoneGap application is by far the most viewed page of my blog so I thought I’d revisit it and write an article about a more efficient method I have been using, following the release of jQuery 1.5.

Previously I had been using the wonderful JSONp jQuery plugin because jQuery 1.4 and lower did not support out of the box error handlers for JSON requests. jQuery 1.5 does, however, and it’s made things simpler and more streamlined.

(more…)

Creating a lightweight and semantic jQuery tabs plugin

  • 12 comments

Filed in: css, jQuery, plugin, Uncategorized

Earlier this year I wrote a tiny jQuery accordion plugin, for mobile projects, because I was sick of using non-semantic code snippets to create a very simple ui component. While writing it I realised that it would be reasonably straightforward to create a tabs version using the same principles.

(more…)

Using a smattering of CSS3 and two background images to create a colour-burst effect

  • 0 comments

Filed in: css, jQuery, Uncategorized

CSS3 colour bursts

Recently I’ve been helping my brothers fiancée with her website. The site uses a lot of close-up photography layered using CSS backgrounds. In an effort to make things a little more interesting I wanted to create a simple effect of fading black and white images into colour versions.

(more…)

Using a teeny-weeny bit of jQuery to add CSS inline backgrounds for blocks of text

  • 49 comments

Filed in: css, jQuery, plugin, Uncategorized

For as long as I can remember I’ve always used a particular style of typography design when working with print based material. It’s nothing groundbreaking, and I’m sure you have used it as well.

It goes something like this:

Mos Eisley spaceport: You will never find a more wretched hive of scum and villainy. We must be cautious.
A print-based approach to text backgrounds. Simples.

(more…)

Introducing Mini-Map, a document visualisation jQuery plugin

  • 0 comments

Filed in: jQuery, mini-map, plugin, Uncategorized

I love the iPad, it’s flipping awesome! I love browsing the Internet with my fingers, it’s a far nicer and casual experience than sat infront of the same screen, in the same place, in the same room. And it’s brilliant to see that designers are now taking into consideration how their sites work on tablets and large screen mobile devices. The advent of the media query makes it a doddle to create a responsive design, that changes according to the device/screen.

But, and this may be a pre-emptive ‘but’, as web designers we still feel compelled to design sites that scroll vertically. We fear the horizontal scroll. We’re terrified of it. Well most of us—there are some brave designers out there that don’t feel intimidated by the horizontal scroll though, the likes of Dom Goodrum, an old friend from University, and Teehan+Lax with their new TweetMag app are more than happy to explore the X axis.

(more…)

A super-lightweight mobile webkit accordion jQuery plugin, great for iOS/Android PhoneGap apps

  • 16 comments

Filed in: android, iOS, jQuery, PhoneGap, Uncategorized

Ahhh, accordions. Their use and acceptance in web design has been varied over the years, but right now I think we can safely say they are en vogue. Unfortunately, as developers (myself included), when we use an accordion we probably use the same old chunk of code and non-semantic tag-soup that we used last season. And the time before that.

For about a year I’ve been meaning to write my own lightweight accordion that we can use across the board on our various projects at RITH. And at the moment, that largely entails creating reusable webkit optimised code for use on iOS and Android mobile devices deployed as native apps using PhoneGap.

(more…)