Development Update – Week of July 11th, 2011

---

New test device donations!

We’d like to thank a number of companies who really came through this week for the project by donating a fresh batch of devices to the test lab here at Filament Group. This week, we’d like to take the time to thank HP Palm, Nokia and Grupo.Mobi for donating devices to the project. Here’s the rundown:

• TouchPad – This is a cool tablet running the latest Palm WebOS 3.0 software. Early testing indicates that CSS support is really improved from WebOS 2.0 so the pages render cleanly and look great. We have a few small tweaks to make, mostly focused on the positioning of toolbars, menus and loader but we’re in great shape otherwise. Orientation changes don’t seem to trigger a re-flow of the layout so pages zoom instead of adjsuting to the screen width, but maybe this will be fixed in an update. We really hope that Palm HP roll the browser improvements into the WebOS 2.0 because that version has fairly serious CSS rendering issues.
• Nokia N8 – We’ve been waiting to get a newer Nokia device and we were pleasantly surprised that jQuery Mobile renders really quite well on this slick little phone. The biggest gotcha is that the S60 based browsers (including this latest phone) don’t correctly add hashchange changes in the history stack in the browser so the Back button doesn’t work with our Ajax navigation. We were hoping this would have been fixed by now, but it looks like we’ll have to bump this platform down to B grade support which translates to a fully enhanced experience, except without Ajax navigation (full page refreshes and no transitions).
• Samsung Galaxy Tab 10.1 – This is our first device running the Android Honeycomb OS and it’s a very nice device — very lightweight and responsive.  The jQuery Mobile demos and docs seem work render and work great on this device, no big surprises. CSS based transitions are still pretty chunky but rounded corners are finally anti-aliased. We are truly living in the future. Donated by Grupo.Mobi
• Google Nexus S – We finally have a phone running Android 2.3 so we can finally ditch the emulators. So far, 2.3 looks great, no major snags and really great rendering performance, smooth scrolling and a very responsive screen. A very nice device. Donated by Grupo.Mobi

The jQuery Mobile project relies on the generous donation of devices, developer time and financial support from individual developers and companies to continue our work so if you can help out, please contact the project lead, Todd Parker, for more details.

Gradients: Expanded platform support

We just added additional vendor-prefixed rules for CSS3 background gradients to increase browser support of this feature. There are now Opera (-o) and Internet Explorer (-ms) prefixed gradient rules in addition to the standard, non-prefixed version. Thanks to Paul Irish CCS3 Please for the slick formatting ideas for these rules:

background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111); /* Standard, non-prefixed */

This now means that our background gradients work in WebKit, Firefox, Opera, Internet Explorer 10 and any other browser that supports the standard, non-prefixed rule. As we mentioned in last week’s post, we had to remove the -ms filter gradient rules due to a rendering issue in IE9 that conflicts with border radius and won’t be fixed by Microsoft. This means that older versions of IE will just see a flat background color, including WP7 and the forthcoming Mango release. More info on this bug and decision can be found at issue #2046.

We’re looking for a volunteer to roll this new syntax into the Valencia theme so please comment in the issue if interested.

Loading message: Now configurable at runtime

Previously, you could customize the loading text message on initialization as an option, but you couldn’t modify it on the fly from within a page if you wanted a different message for the particular situation. We just landed an improvement so you can set the contents of the loading message programmatically at runtime. The syntax is the same as it’s always been, you can just use it more flexibly:

$.mobile.loadingMessage = "My custom message!";

Configurable swipe event thresholds added

There were a number of hard-coded constants in the jquery.mobile.event.js swipe code. For developers who need to tweak those constants  to allow a greater vertical displacement and still register a swipe, this new feature allows them to be adjusted. Thanks to mlitwin for contributing this.

• scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling
• durationThreshold (default: 1000ms) – More time than this, and it isn’t a swipe
• horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
• verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.

Page pre-fetch page option added

Another cool feature we just added is the ability to flag pages that should be pre-fetched by Ajax. For example, if you’re building a photo gallery with each photo on a separate HTML page, you can pre-fetch the previous and next pages in the slideshow sequence so they will display immediately without the Ajax loader. It’s simple to use: just add a data-prefetch attribute to any link in the page and the framework will lazy load the pages into the DOM in the background. We recommend building your apps as a series of individual, linked HTML documents for each page for performance yet we see a lot of people using multi-page templates and even nested lists (yikes) as a way to essentially pre-load content. We hope this feature will encourage developers to use standalone, external pages with selective pre-caching instead of relying as much on multi-page setups.

<a href="foo/bar/baz" data-prefetch>link text</a>

Pages can also be pre-fetched programmatically by calling $.mobile.loadpage( url ). Pre-fetching links will naturally cause additional HTTP requests that may never be used, so it’s important to use this feature only in situations where it’s highly likely that a page will be visited.

Coming soon in Beta 2

We’re hoping to land the following changes next week in preparation for Beta 2. Here’s a sneak peek so you can test out these branches and give us feedback.

Expanded browser support for transitions

Our original page transitions were based on jQTouch and they are really quite nice. Unfortunately, these were built with CSS keyframe animations that only work in iOS, WebOS and Android.  Since we released Alpha 1, a number of browsers have added support for CSS transitions so we’re working now on switching over to CSS transitions. We will be addingd vendor-prefixed CSS rules for Opera, Firefox, and Webkit so it makes the CSS a bit heavier but brings animated page transitions to a wider range of platforms and browsers. Follow our progress on the issue page and check out the transitions branch to test drive the new transitions in action.

Automatic DOM size management

Since jQuery Mobile loads multiple pages into the DOM via Ajax to enable the animated page transition, we’ve obviously been concerned about memory use as people navigate through a series of pages. We’re working on adding a feature to keep the DOM clean and manageable and it works like this: if a page is brought into the DOM via Ajax, it is removed from the DOM when the page is hidden (transitioned out). If you want to return to this page, the browser retrieve the cached version and load that in instead of re-requesting it so we’re leveraging the native browser’s capabilities to manage memory use. Note that pages loaded as part of a multi-page template won’t be removed, only external pages loaded in via Ajax. This feature will be turned on by default, but can be configured via an option. Specific pages can be protected from removal by adding a data- attribute the page container. View the commit for this feature and give it a try out the disable-ajax-dom-caching branch and give us feedback.

Delayed auto-init

This change allows developers to delay the auto-init call until whenever they want to call it manually. This is useful when building dynamic applications. Read the commit message and preview the autoinit-option branch to give it a try.

Notable commits this week

Fix for URL handing in navigation with relative URLs – Now you can call $.mobile.loadPage with a relative path and it will load the page correctly, regardless of whatever page you are linking from.

Removed the nonHistorySelectors option, which was no longer in use after the nav refactor.

Fix for rounded corners in collapsible Set (issue #1931) – The first section in a collapsible set has rounded bottom corners when not expanded (shouldn’t have .ui-corner-bottom class), and the last section does not have rounded corners when collapsed (should have .ui-corner-bottom class). Thanks beatryder!

Checkbox list with same name do not allow multiple selection (issue #1851) – The checkboxradio plugin treats a check box list with same value for the name attribute for the check boxes as radio buttons. Thanks Tigbro!

Rounded corner login for inset lists  with two items (issue 1996) – The top corner style doesn’t get applied in an inset list with two items (other number of items work fine). Thanks eugenb1!

Close button behavior fixes (Issues #1618, #1692,#1750)- Abstracted out some of the page hide behavior to fix issues with the close button not returning focus to the button after closing. Also fixes an issue where a full page custom menu would open as a misplaced small custom menu the second time it opens (if the menu was closed via the custom close button).

Changed padding-box to padding for -moz-background-clip per this spec

Slider onChange event is launched on page load (issue #1526) – the onChange event was triggered when the page loads  instead of only when the slider’s value is changed.

Disappearing text in IE7 (issue #2058) – Text would only appear on mouseover in certain circumstances due to a rendering bug in IE (shocker!). Fixed by adding the zoom: hack.

New Packt book: jQuery Mobile First Look

There is a lot of excitement about jQuery Mobile and we’re happy to see so many books coming out, even though we’re still in Beta. Packt Publishing has a nice overview of the framework in their new book:  “jQuery Mobile First Look” which is available now. Here’s what it covers:

• Easily create your mobile web applications from scratch with jQuery Mobile
• Learn the important elements of the framework and mobile web development best practices
• Customize elements and widgets to match your desired style
• Step-by-step instructions on how to use jQuery Mobile
• eBook available as PDF and ePub downloads and also on PacktLib

Interesting articles

In case you don’t follow @jquerymobile on Twitter, here are some great new tutorials and articles on jQuery Mobile we’ve seen this week:

Using and customizing jQuery Mobile themes – Adobe Developer

How to style buttons with jQuery Mobile – O’Reilly Answers

jQuery Mobile in Visualforce pages – Salesforce.com Force blog

jQuery Mobile – adding Local Storage – Raymond Camden’s ColdFusion Blog

Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2 – Jeff Linwood

How to create and self-init a jQuery Mobile plugin – Gist by Scott Jehl

Blackberry Contest

jQuery Mobile works great on the the new PlayBook tablet so this is a great opportunity to win some cool prizes. Are you creating an innovative BlackBerry WebWorks app using the jQuery Mobile framework for the BlackBerry PlayBook or BlackBerry Smartphone or thinking about jumping in?  There’s never been a better time with big prizes up for grabs in the Most Innovative BlackBerry WebWorks app on the BlackBerry PlayBook tablet and BlackBerry 6 challenge!

 

Get the latest builds on the jQuery CDN

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release.

Here are the three files to include in the head of your page to always be viewing the latest in Git:

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

Please keep in mind that this the unstable, development version so we don’t recommend linking to the latest in a production site or app but it’s great for development and testing.