Styling File Inputs in iOS6 with jQuery Mobile

File this post under: “stuff that’s in obscure forum posts but not really documented well”. As per a previous post, iOS6 brought about access to the camera in Mobile Safari. While access is not real time (getUserMedia would be amazing), we are able to prompt the user to take a new photo or access the camera roll. Presumably for security reasons, styling file inputs in desktop browsers has always been hell on earth. Mobile is much the same.

What you can do as a work around is rely on native browser functionality where clicking a <label> triggers the clicking of it’s associated <input>. I’ve relied on the native jQuery Mobile button styling for speed, but you can achieve pretty much anything. Hiding the input can be achieved in various different ways, but as far as I know it cannot be display: none; for security reasons. Setting visibility: hidden; or opacity: 0; will all achieve the same effect, and setting position: absolute; will take it out of the page’s flow.

You can see it in action in the JSFiddle below.

image

iOS Theme Update

I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.

The changes are:

  • Added support for jQuery Mobile 1.2.0
  • Support for, and styling of new popup elements
  • An example iOS style popup as per the image below (would be best if you set it up with a timer to hide after a couple of seconds?)
  • Major refactoring of “in page” button styling. No more messy .ui-btn:not(this):not(that), instead it inherits from .ui-btn-plain.
  • Closed various issues and pull requests
Notable exclusions/issues:
  • While basic popups are supported, no nested popup menu support is available
  • As above, button syntax has changed. This causes an issue with <button> elements. I’ve raised a bug here.

 

Repository Updates (iOS Theme + jQuery.Gantt + Aristo)

Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.

jQuery.Gantt

This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.

I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.

For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.

  • Major performance increases.
    A before and after IE9 test shows performance going from 20 seconds to 400ms.
    That’s 2% of the previous run time.
  • All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
  • State persistance - requires cookie.js to work.
  • Scroll to today on load
  • Extensive documentation
  • Defined a license (MIT)
  • Removing $.ajaxSetup, which was corrupting other scripts in the page.
    According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting $.ajaxSetup externally.

Unfortunately that means there are some new issues:

  • Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
  • Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
  • Holiday and “Today” highlighting are not occurring on the cell, only the header.

Two steps forward one step back. No biggie.

 

iOS jQuery Mobile Theme

I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.

  • Fixed: header bars had black top border
  • Fixed: Vertical centring of header buttons was off (related to above, layout woes)
  • Fixed: Black buttons had blue text shadow
  • Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
  • Pull Request: <label> styles coming from poorly scoped selector
  • Pull Request: Demo page typo
  • Set demo page transitions to “slide” by default
  • Set all demo page toolbars to be position=”fixed” by default
  • Decided on licensing (MIT)

 

Aristo jQuery UI Theme

  • Fixed: Cross browser CSS3 animations appear to have been re-instated.
  • Pull Request: Added a non-prefixed value that I missed.
  • Pull Request: Widget nesting issue fixed.


 

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.

 

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.

iOS Inspired jQuery Mobile Theme jQuery Mobile doesn&#8217;t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems.  The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices. There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group&#8217;s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I&#8217;m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future. But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.    Some Caveats To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file. The CSS3 back button isn&#8217;t perfect, there are some jaggedness and shadow issues. Plenty of elements still remain unstyled, or are missing hit state styling. Cross browser compliance is a low priority. This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top. Some Issues This Exposes in jQuery Mobile Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured. Back button syntax. They&#8217;re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons. It&#8217;s bloody hard to keep up with the release cycle. This is not a bad thing ;) I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■
Pop-upView Separately

iOS Inspired jQuery Mobile Theme

jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems. 

The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.

There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.


But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.

  

Some Caveats

  • To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
  • The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
  • Plenty of elements still remain unstyled, or are missing hit state styling.
  • Cross browser compliance is a low priority.
  • This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.

Some Issues This Exposes in jQuery Mobile

  • Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
  • Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
  • It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)

I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■

Interesting jQuery Mobile Design Choices

Following major announcements from Sencha Touch and jQTouch, the jQuery team has piped up: announcing jQuery Mobile. How the jQuery Mobile project differs from projects like jQTouch is the way in which it aims support a range of devices. This can only be achieved by making use of a unified design approach.

jQuery Mobile is faced with an exceptionally difficult task. jQuery Mobile theme design must complement a range of operating systems including iOS, Android, webOS, Symbian, Windows Mobile, Blackberry and more.

Over the years, Apple has introduced and perfected a range of design and usability conventions for the handheld device. It has always felt like the competition has been clamoring to catch up. Libraries like Sencha Touch and jQTouch piggy-back off the success of the iOS interface. If jQuery Mobile is to set itself apart from other libraries, and appear as native as possible across a range of devices, it must abandon some of the best-practice examples that Apple and others have already established.

Below is a comparison between jQMobile and iOS back buttons. I think the iOS back button is an excellent motif, where the tapering of the left hand side represents the direction this button will take you in. Without that, you need some kind of directional arrow. Your back button just grew 31px, and now reminds you of the early 00’s.

Rounded as Usual

I’ve been fairly critical of jQuery UI themes in the past. Points I made about the “goofyness” of the themes were in fact well received by the jQuery UI team and lead to some changes in ThemeRoller. A lot of the problems stemmed from excessive rounding, vibrant colour choices and dated gradients. With jQMobile, the rounding of pretty much every element remains unchanged. A combination of excessive rounding and the “abandoning Apple conventions” problem lead to the following example:

What this screenshot means to me is that if I want a ‘Back’ or a ‘Cancel’ button at the same time as a ‘Save’ button, (preserving padding and readability) I can only spare four characters for a title. That’s right. Four. Characters.

Don’t get me wrong, the majority of elements look big and clickable and enticing. It’s also good to see the design team toning down their colour choices to the colour-of-now: desaturated blue. jQuery and jQuery UI have revolutionised design and development for me personally, and have changed the way we do things at work. If jQMobile can iron out some of the UI teething problems, hopefully it can do the same for universal app development.

PS. For the love of god, please tone down the rounding. Everyone knows it reduces your perceived hit target. And it looks cheap.