Development Update – Week of May 16th, 2011

Posted on by

In addition to discussing our daily activity of the project in our weekly blog posts, we’re going to try and start covering some of the interesting developments around jQuery Mobile out in the world. Feel free to ping jquerymobile on Twitter if you have a project, plugin or event that you’d like to share.

Beta 1: Coming soon

The jQuery Mobile team is making great progress and we’re getting close to our first beta release. At this stage, we want to complete all the navigation re-factor work, achieve solid Blackberry and Opera Mini support, and close out a few key blocker issues before we hit this milestone. We’ll will keep everyone updated here on the blog as we get closer to beta 1, but we’re hoping to release at the end of May or early June.

Ajax navigation and B grade support

We’re almost done getting Blackberry 5 support buttoned up and it’s looking great. However, one major issue we’ve found is that it doesn’t support hashchange events in the history stack so the back button is effectively broken completely with Ajax-based navigation. Symbian has the same issues with tracking hashchange and there isn’t a viable workaround for either platform. We’ve also found that Opera Mini’s proxy-based rendering has a number of issues with the Ajax navigation that can cause blank or clipped pages if the timing of the rendering is a bit off.

For these reasons, we’re looking into ways of excluding these platforms from the Ajax navigation system but still give them the rest of the enhanced user experience. In our early tests, eliminating Ajax navigation from Blackberry 5, Opera Mini and Symbian have dramatically improved the performance of jQuery Mobile on these platforms so we’re currently working on a way to target this feature without resorting to user agent detection which we avoid at all costs in jQuery.

This enhanced experience without Ajax navigation and page transitions seems like a good way to characterize the “B grade” support. Stay tuned, we’ll have some announcements on this topic soon.

Pinch-to-zoom: Now restored

Our demos and docs had a viewport meta tag that set “minimum-scale=1, maximum-scale=1” which completely disabled the pinch- or double-tap-to-zoom feature in mobile browsers. We had done this originally because on iOS, there is a bug that will incorrectly scale the page when you change orientation. Here is the meta tag we used up through Alpha 4.1:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

Disabling the native zoom features of the browser isn’t very user-friendly so we just changed our meta tag in the demos and docs to restore the ability to zoom the page. At this stage, we don’t think it’s worth disabling the user’s zoom feature to workaround an iOS bug that may be fixed in the near future. The meta tag is part of the page markup so this isn’t a a change to the library scripts, but our demos are used as a template for many people so we want to set an example of the best practice for mobile web development. The new meta tag we use looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

We landed two changes earlier this week to adjust the meta tags so if you go to the latest demos, you will be able to pinch zoom the pages. Since this meta tag is part of your page content, you are free to set these attributes to match the specific needs of your project.

Note that JavaScript can be used to manipulate this tag dynamically to fix the iOS bug, but this approach is far from fool-proof and causes some performance issues. At this stage, we want to start with the simplest option (leaving the browser feature untouched) and think about alternatives to improve this for 1.0.

Dynamic injected viewport meta tag: Support dropped

On a related topic, we deprecated injecting the viewport meta tag back in alpha 4 due to Windows Phone 7’s lack of support for dynamically injected viewport elements.  This week, we removed the dynamic viewport support from the codebase in preparation for beta so if you haven’t switched to writing this tag into your markup, please do that now in preparation for Beta.

Automatic toolbar back button: Now off by default

In last week’s blog post, we outlined the reasons why we felt the feature that automatically adds a back button to the header toolbar, while cool, wasn’t really necessary for most web sites and web apps because browsers and phones already have back buttons. The response in the comments and Twitter was overwhelmingly positive to moving in this direction so this week, we landed this change.

All this really means is that this feature is off by default. It’s not going anywhere because we understand that in fullscreen browser environments or installed apps, there isn’t browser chrome or a physical back button on all platforms so you’ll want to flip this switch on in those cases.

To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:

$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });

 

Notable commits

Upgraded jQuery Mobile to use jQuery core 1.6.1 to pick up :checked fixes.

Add new focus event to show the clear button on search textbox when an item is pasted directly without a key event to search text box. Thanks joshiabk

Interesting jQuery Mobile Plugins

Actionsheet – A really simple, markup-driven plugin that allows you to create small floating overlays that contain buttons or any other content or even forms with a bit of CSS tweaks.

Photoswipe – A slick photo gallery tool, now with jQuery Mobile support. Check out the demos to see it in action.

Datebox – A calendar and Android-like spinner datepicker. The site has lots of demo examples to play with so check it out.

Google maps – Integration examples of Google maps with jQuery Mobile that show how easy it is to drop maps into mobile.

Mobilism talk on jQuery Mobile

Team member Scott Jehl spoke recently at the Mobilism conference about the current state, lessons learned and future of jQuery Mobile: “jQuery Mobile: Building Tools for a Changing Web”. Check out his presentation video and summary by Luke W.

New team member

We want to welcome Ghislain Séguin from Jive Software to the jQuery Mobile team. He will be working part time on the jQuery Mobile project at Jive. We’re glad to have you aboard.

We’re still trying to figure out a solid timeline for getting a ThemeRoller tool created for jQuery Mobile. In the meantime, we’d like to set up a place for people to share themes with the community. To create a theme,  just grab a copy of the default theme and start tweaking colors in the CSS. We’d like to get themes that cover a broad range of look and feel and include at a minimum 5 swatches (a-e) for compatibility with the current themes. Other than that, go to town deeply customizing your themes. Check out the structure of the slick Valencia theme by Jordan Dobson to see the structure of a standard theme. To submit your theme, please post a link to a zip download or Git repo and tell us about it on twitter or by emailing Todd Parker. We’re looking forward to seeing what you create!

Looking for inspiration?

If you want to see all the cool things people are building with jQuery Mobile, be sure to check out jQMgallery.com. In addition to highlighting inspiring sites built with jQuery Mobil, it also maintains lists of resources, tutorials, and plugins.

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.1.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.

 

5 thoughts on “Development Update – Week of May 16th, 2011”

  1. Pingback: Status Update – jQuery Project

  2. julien on said:

    another great news and post from jquerymobile team!

    This is becoming really interesting and it’s great to have so frequent news on the development.

    thanks a lot!

    just a quick note: there is mini problem with the link to http://www.jqmgallery.com
    “http://” was forgotten which end-up in a page not found.

  4. odedbd on said:

    Thanks for the progress update, these are excellent news. I’m really looking forward to the BB support. Since ajax navigation is not a viable option for my application anyways, the purposed “B-grade” support is a perfect match for my needs.

    Thanks for all you hard work!

  5. Ade on said:

    These regular updates are very useful

    I hope you will look again at how button states are applied. I seem to spend a lot of time trying to find ways to overwrite hover states which JQM is applying itself. There really needs to be a Visited state in the CSS rather than reusing Hover, which can then be overwritten. Alternatively a option to disable all retrospective application of button states

    Thanks