Repository Updates

iOS Theme for jQuery Mobile

Good news! I’ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.

A full list of changes and resolved bugs follows:

  • Supports jQuery Mobile 1.1.0 (this was a nightmare)
  • Code cleanup more strictly obeys my coding conventions
  • All gradients and effects are now cross browser compatible (Issue #2)
  • Updated slider toggle to iOS 5 style (Issue #7)
  • Got dialogs looking as close to native as possible considering jQuery Mobile doesn’t support overlayed dialogs (they’re standalone pages) (Issue #3)

The changes have introduced a few minor visual quirks relating to the .ui-focus box shadows etc, but hopefully these will be rectified in the near future.

 

jQuery Gantt

I made some minor code changes, but the most important thing here was the addition of documentation. The original creator didn’t provide any, so hopefully this makes a bit more sense. I’m sure I’ve missed something here and there (holidays?), but I’ll fix that up as we go.

The changes:

  • Added documentation and better demo with bootstrap popovers
  • Works with latest jQuery 1.7.2
  • Merged pull request for “undefined error”, thanks Nathan Colgate.
  • Code and folder cleanup
 

Front End Development Guidelines

The page now passes HTML5 validation. Apparently some people care about this.

 

jQuery Mobile 1.0.1 - iOS Theme Compatible

I haven’t touched the iOS inspired jQuery Mobile theme in quite a while, but a few of you have been messaging, mailing at tweeting at me asking if I’ll support the jQuery Mobile 1.0 build. And….. it’s done. Here’s the list of changes:

  • Updated to jQuery Mobile 1.0.1 build
  • Fixed graphical issues stemming from this: #23, #24 and #25
  • Page buttons now take on gradient-less style (previously only <a> tags)
  • Merged a pull request related to a button icon bug fix

As always, the demo is up to date and available.

 

bootstrap.footnotes.js - UX Lab 008

I love the Instapaper-style footnotes/endnotes that came about with the last major update. Here they are in web form, as a jQuery/Bootstrap plugin. Unfortunately there’s a dependency upon Bootstrap CSS/JS, but such is life. It’s retina ready too - as everything else should be these days.

Here it is in action:

Documentation and options are available on the demo page.

It also has its own GitHub repository.

 

HTML iOS Notifications - UX Lab 007

I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.

  • It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions. 
  • It has built in retina icon handling.
  • Doesn’t break middle mouse clicks when using a URL.
  • Passes JSHint.
  • It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.

Documentation and options are available on the demo page.

It also has its own GitHub repository.

 

jQuery-UI.toggleSwitch() - UX Lab 005

The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don’t want the extra bloat of yet another library. It draws upon the theme .ui-slider for the look and feel, and can be applied to <select>  elements with two child options.

Configuration options and examples are contained within the UX Lab page. I guess this warrants it’s own GitHub repository for change management and issue tracking. I’ll get around to that eventually.

 

Idle jGrowl Re-routing - UX Lab 004

Paul Irish wrote a pretty chill script back in 2009 for detecting when a user becomes inactive. It’s quite ingenious in its simplicity, as the best things usually are. What wasn’t explained fully is the ways in which this can be used to deliver a better user experience. It’s fantastic for preventing timed or asynchronous actions when users aren’t going to benefit from the action.

This quick little experiment is aimed at demonstrating the concept in the simplest form.

A jGrowl notification triggered every ‘x’ seconds, or by a server event, isn’t of much use when the user isn’t around. They disappear after a few seconds. So instead, if the user is deemed inactive, you should make them “stick” or push them to a modal, similar to the loathed Growl notification rollup pictured below.

Obviously the linked example isn’t quite as eloquent, but it’s not like the Growl rollup was that well received to begin with. See what other cool shit you can come up with.

 

I&#8217;ve just pushed some pretty hefty changes to the jQuery.Gantt project I&#8217;ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn&#8217;t play nicely with my pre-existing code.  I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below. A lengthy list of changes follows: Reduced conflicts with Twitter Bootstrap by name-spacing styles Source now accepts data from a local object, not just a JSON call   Can now extend data properties on to bars for use with Bootstrap popovers etc. Code is now &#8220;use strict&#8221; Fixed a couple of errors resulting from &#8220;use strict&#8221; Various English translations: renamed months and days to english, hollydays/holidays Redesigned buttons and slider with CSS3 and an image sprite Modified category colours and styles Made chart 100% width so it responds to parent container width Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity Updated demo page doctype to HTML5 Moved body styles from stylesheet to page to reduce style conflicts  
Pop-upView Separately

I’ve just pushed some pretty hefty changes to the jQuery.Gantt project I’ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn’t play nicely with my pre-existing code. 

I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below.

A lengthy list of changes follows:

  • Reduced conflicts with Twitter Bootstrap by name-spacing styles
  • Source now accepts data from a local object, not just a JSON call  
  • Can now extend data properties on to bars for use with Bootstrap popovers etc.
  • Code is now “use strict”
  • Fixed a couple of errors resulting from “use strict”
  • Various English translations: renamed months and days to english, hollydays/holidays
  • Redesigned buttons and slider with CSS3 and an image sprite
  • Modified category colours and styles
  • Made chart 100% width so it responds to parent container width
  • Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity
  • Updated demo page doctype to HTML5
  • Moved body styles from stylesheet to page to reduce style conflicts

 

Dynamic Credit Card Type Selection - UX Lab 003 If you find yourself buying a lot of things online, or perhaps building a lot of eCommerce websites - you will have experienced a range of credit card forms. The good. The bad. The ugly. Some fields are required to pass security checks. Some seemingly exist only to frustrate you. But what seems constant is the lack of innovation over the years in what is a staple in eCommerce design. One example that does it really well is the purchase page for Coda, by Panic Software. Not only does it auto-select the card type of the credit card, but it also updates the select button with a background image indicating progress. The only downside I can really find to the Coda page is that when the card image changes, it&#8217;s not sprited so you see a flash of white as the images load. Using a list of prefixes published to Wikipedia, it&#8217;s possible to identify nearly every card type in the world. This opens a host of possibilities to designers, like this: &#8220;CC Rebound&#8221; by Ryan Rumsey Not shown in this demo is the ability to isolate the first two or three characters, to further narrow the type of card. How would you differentiate between Diner&#8217;s Club (36) and American Express (37), both starting with &#8216;3&#8217;? Using substr(). The rest is up to you.  
Pop-upView Separately

Dynamic Credit Card Type Selection - UX Lab 003

If you find yourself buying a lot of things online, or perhaps building a lot of eCommerce websites - you will have experienced a range of credit card forms. The good. The bad. The ugly. Some fields are required to pass security checks. Some seemingly exist only to frustrate you. But what seems constant is the lack of innovation over the years in what is a staple in eCommerce design.

One example that does it really well is the purchase page for Coda, by Panic Software. Not only does it auto-select the card type of the credit card, but it also updates the select button with a background image indicating progress. The only downside I can really find to the Coda page is that when the card image changes, it’s not sprited so you see a flash of white as the images load.

Using a list of prefixes published to Wikipedia, it’s possible to identify nearly every card type in the world. This opens a host of possibilities to designers, like this:

“CC Rebound” by Ryan Rumsey

Not shown in this demo is the ability to isolate the first two or three characters, to further narrow the type of card. How would you differentiate between Diner’s Club (36) and American Express (37), both starting with ‘3’? Using substr(). The rest is up to you.

 

Developer Snippet - Pretty AJAX Errors

Tired of drudging through the console when looking for the cause of AJAX errors? Sick of trying to scan the stringified .NET or webservice error pages for the underlying error? Do I have the handy hint for you!

The following snippet creates a global listener for AJAX errors, shows a jGrowl reporting the error thrown, and then allows you to view the resulting error page - all without breaking the user’s workflow.

Example on JSFiddle.

It was designed to work with .NET applications and webservice error messages which both return error pages, but there’s no reason why you can’t use this with RESTful services (or anything) returning error codes and error messages.

Requires: jQuery, jGrowl JS and jGrowl CSS

Repository Updates (iOS Theme + Front End Dev)


Front End Development Guidelines (Demo | GitHub)

The ability to “deep link” to categories and articles went in a while ago, but until today there wasn’t a UI to make it easy. I also added a section on centering content, both horizontally and vertically. It reflects the blog post I recently posted on the matter.

iOS jQuery Mobile Theme (Demo | GitHub)

I’ve replaced the CSS3 back button with an image sprite. The original snippet required a custom button syntax and just flat out looked terrible. I dabbled with -webkit-mask-images, but these are buggy and inconsistant. There was no reliable way to mask the button into the correct shape, and then apply the CSS3 gradients, shadows and border effects. It was a compromise, and currently only supports 1x (non-retina) displays, but it works. Here is the difference blown up.

I also styled the persistant footer bar and added in some sample Glyphish icons. Please consider the licensing if you want to implement the Glyphish icons on a commercial site.