Announcing jQuery Mobile 1.1.0

Posted on by

The jQuery Mobile team is excited to announce the release of version 1.1.0.

This release has been a real labor of love, with hundreds of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board.

The most notable improvements in 1.1.0 are true fixed toolbars, completely re-vamped animated page transitions and AJAX loader, refined form element design and feature set, and improved documentation.

To make the upgrade process from 1.0 to 1.1 smooth for our existing developers, we’re also launching a new ThemeRoller Mobile tool that supports both versions and makes it easy to import a 1.0 theme and migrate it to 1.1. A new downloader builder tool is almost ready and will be in limited alpha next week.

 

jQuery Mobile 1.1.0 Final
Requires jQuery core 1.6.4 or 1.7.1

Demos & Documentation
Quick Start Guide
Download 1.1.0 Zip
Fork on GitHub

 

Key changes | Upgrade notes | Thanks | Download & CDN | Supported Platforms | Change log

KEY CHANGES

True fixed toolbars: Lightweight, CSS-based & broadly compatible

Browser support for fixed toolbars

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

When we first started developing the library, CSS support for position:fixed in mobile platforms was pretty much non-existent so our “fixed” toolbar solution dynamically re-positioned the toolbars each time you scrolled the page. Although it was a decent stopgap, the way mobile browsers would freeze the DOM during scroll would result in the toolbars briefly scrolling with the document which was impossible to completely fix. Alternate approaches use JavaScript-based momentum scrollers to achieve true fixed toolbars, but these only work on a small subset of platforms, have non-native scrolling physics, and can introduce performance and usability issues in less capable devices. None of this was an acceptable option for this project.

Luckily, around the time we released 1.0, Brad Frost posted his results of extensive tests of position:fixed on mobile browsers. Surprisingly,  support is now quite good  so we set about prototyping and testing a CSS-based replacement for our fixed toolbars.

We now have a solid re-write that provides true fixed toolbars on the a lot of popular platforms and safely falls back to static toolbar positioning in other browsers.

The coolest part about this approach is that, unlike JS-based solutions that impose the unnatural scrolling physics across all platforms, our scrolling feels 100% native because it *is*. This means that scrolling feels right everywhere and works with touch, mousewheel and keyboard user input. As a bonus, our CSS-based solution is super lightweight and doesn’t impact compatibility or accessibility.

The new fixed toolbars also have a robust set of options and methods you can tap into to customize the behavior such as whether toolbars are visible on page load, whether the tap to toggle toolbar feature is enabled, toggle transition (defaults to slide up/down)

Optional backwards-compatible polyfill fixed toolbars

Since we’re removing the 1.0-era fixed toolbar re-positioning script, some platforms like iOS 4 will now fall back to static positioning where the toolbars simply scroll with the page. We believe that the crisp divide in 1.1 where fixed toolbars either work perfectly or fall back to simply scrolling with the page is a smart approach. However, we heard from some people that that even though the older, dynamic re-positioning behavior wasn’t perfect, it was still something they wanted the option to use.

We re-worked the 1.0 re-positioning script to work as an extension to the new 1.1 fixed toolbars for RC2. When this extension is added, it adds the 1.0-style fixed toolbars for browsers that don’t support position:fixed but can handle dynamic re-positioning. To add the 1.0-style toolbar polyfill, just include the CSS and JS files after your references to jQuery Mobile and fixed toolbars will work similar to jQuery Mobile 1.0 in iOS 4.x and other, older platforms.

Since this polyfill adds a code weight and maintenance complexity for a fairly small slice of users, we’ve decided to release this polyfill as an optional extension that is outside the core jQuery Mobile library. This means that the codebase won’t be included as part of the jQuery Mobile package and won’t be maintained on the same schedule as the library. We’ll continue to refine this plugin in the Filament Group repo so help us test this and log issues in the tracker.

Improved transitions: Smoother, faster

Our AJAX navigation system is one of the best things about jQuery Mobile because it makes page navigation faster and adds animated page transitions. We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant things that turned out to very difficult: the need to scroll the page between transitions and Android’s poor animation performance.

First, we have a hard constraint that both the page you’re on and the page you’re animating to are both sitting on the same viewport — we animate and scroll the viewport to achieve the transition effect. This means that if you are scrolled down on a page and click a link, we need to first scroll to the top of the page, then begin the transition (yeah, we tried every CSS trick to avoid scrolling, none work well on longer pages or Android). Since we also restore your scroll position if you go back, we may need to scroll up, transition, then scroll down to restore your scroll position. On mobile devices, scrolling is pretty slow so you’d see the page scroll by then stop at the top which can make things feel jumpy.

Because we don’t have widespread CSS support for overflow:auto on mobile browsers and aren’t satisfied with the limitation of JS-based scrollers, we had to think creatively. For 1.1, we embraced the scroll jump constraint and shuffled the sequence of the page transition JS handler to first fade out the current page, then scroll the page into position before transitioning in the new page. Since we’re scrolling a blank page, it scrolls faster and the scroll jump is invisible so things feel much more controlled and smooth. As a bonus, the fade out/in animation is impressively smooth and blink-free on every platform. This does mean that every transition has a place where we need to fade out a screen to accomodate the scroll jump, but we think this still looks pretty sharp.

On the second topic, I won’t mince words here: Android as a whole has abysmal performance rendering CSS keyframe animations. Regardless of version or device, Android devices stutter, drop frames and blink when performing any page page animation other than a simple fade.

Post-1.0, we went back to the drawing board to investigate exactly what combination of CSS properties caused the most issues so we could re-vamp our transitions to be as easy on Android as possible. We found that most common things we wanted to do like animating size or position along with opacity would cause blinks, missing animations and odd opacity rendering on box-shadows. With this in mind, we spent weeks testing on a wide range of Android-based devices to arrive at a set of minimal transitions that would be as non-taxing as possible.

Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down page transitions enough to get acceptable performance in Android 2.x, even on a newer device like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test for 3D transforms to target transitions: if a browser passes, it will see the full range of transitions. By default, if a browser fails this 3D test, they will fall back to a fade transition, regardless of the transition specified. All Android 1.x-2.x devices fail this test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely configurable if you want to change this behavior.

TL;DR: The default page transition is now be a super fast and smooth fade out/in animation. All the 1.1 page transitions have been tweaked to have a place it the animation where we fade out to accomodate the scroll jump, but we think this looks pretty sharp and always in control. On some platforms like Android 2.x that don’t support 3D effects, the simpler fade transition will be the only game in town, regardless of the transition specified. View the new 1.1 page transitions.

Two new transitions in 1.1: Turn and Flow.

In addition to re-vamping all the 1.0 transitions, we’ve added a turn transition that is similar to the WP Metro style page effect and a flow transition that is bit like the iOS tab switching transition where pages zoom in and out. Both look great on platforms such as iOS and Blackberry PlayBook that support 3D.

Multiple transition sequences now supported: Fade and slidefade

The “slide” transition lost some of it’s mojo in 1.1 RC1 because the fade out we do before sliding in the new page definitely changes the effect. We heard that some folks wanted the option to still use the 1.0 style slide, despite the scroll jump, and were chatting in the forums about to how hack this back in. Because the underlying sequence of events is completely different in 1.1, bringing back the 1.0 slide transition is not simply a matter of dropping in the 1.0 keyframe animation CSS. This was situation where we listened carefully to feedback and decided to re-think our plans in order to make 1.1 work well for everyone, even if it delayed our release a bit.

We’re happy to announce that there is now a way to define a transition handler sequence: sync (1.0-style) and async (1.1-style) when authoring a new transition. In RC2, the slide transition now uses the 1.0-style sync handler, and a new slidefade transition uses the 1.1-style async handler. This paves the way for users to port other 1.0 transitions into 1.1, or create their own custom transitions that can leverage either of the these handler types.

Firefox support for transitions

Yep, we’ve added -moz prefixed rules for all the page transitions to bring support to newer versions of Firefox desktop and (hopefully) a future build of Firefox mobile. We will continue to add vendor-prefixed rules for Opera, IE, etc. as these browsers gain support prove they have support with acceptable performance. Vendor prefixes add a lot of code when working with CSS keyframe animations so we want to add these only when supported to keep the file sizes down.

Default theme cleanup

We’ve made lots of small tweaks to the default theme to make it tighter and brighter overall. No detail was overlooked: the focus style is now stronger for keyboard navigation, and contrast has been adjusted for platforms like WP7 that don’t support gradients.

New AJAX loader design and options

As we revisited page transitions, we found that a more subtle loader design actually  made the navigation feel faster so we re-designed the loader to be as minimal as possible and ended up with a light spinner image with no text to keep things simple. Hoever, we understand that there will be times when you do need to display text along with the loader so we’ve beefed up the loader to be much more flexible. There are now a few new global options that let you set whether you want to see the text, loader or both and set the theme or text at runtime. For example, this will show the loader with theme A and a custom message: $.mobile.showPageLoadingMsg("a", "Loading theme a...");. View a demo of these new loader options in the docs.

Related: TouchOverflow feature to be deprecated in 1.1

We introduced the experimental touchOverflow feature in 1.0 because it made our transitions smoother and brought true fixed toolbars in iOS5. This came at the cost of code complexity and a lot of CSS rendering bugs due to Apple’s buggy implementation. Now with our new fixed header and transitions approach, we don’t see any viable use case for this feature so we’re deprecating it at 1.1.0.  Deprecation here simply means no errors are going to be thrown by its removal: we will keep our $.support and $.mobile.touchOverflowEnabled properties defined to avoid throwing issues in custom code that leveraged this feature.

Support for jQuery 1.7.1

jQuery Mobile 1.1.0 now supports both 1.6.4 and 1.7.1 versions of jQuery core. We recommend that you use 1.7.1 to take advantage of all the great improvements in the latest release. If you stick with 1.0.1 for a while, remember that only supports 1.6.4. We’re still testign 1.7.2 and will officially support that in a future release.

Mini form elements

As we worked on fixed toolbars, we started to test the rendering of form controls in headers and footers and in 1.0, things were a bit broken. In 1.1, we’ve spent a lot of time tweaking the form elements so they will render nicely in toolbars but the standard versions seemed a bit big in toolbars.

We had a smaller button style already hard-coded in headers so we used the vertical height of that button as a basis for a new “mini” version of all our form elements (buttons, selects, inputs, sliders, switches, etc.).

By adding the data-mini="true" attribute to these elements, the more compact version will be displayed which is perfect for toolbars. The image on the right compares the standard vs. mini versions of each element.

Flip switch: Improved design


As we started to look at our form elements, the flip switch seemed like it could use a bit of visual cleanup. We looked across popular mobile platforms and they all seemed to use a pretty consistent design that used a smaller handle to maximize horizontal space for the text. In 1.1, we’ve tweaked the design to use a round handle (or square, depending on your theme) for the flip switch and re-vamped the underlying code to make it more robust.

Slider: Highlight feature

We also added a feature to add a track highlight from the left of the track to the slider position. Just activate the highlight feature, add data-highlight="true" attribute to the range input.

Slider: Step attribute support

The step attribute is part of the HTML5 range input spec and allows you to specify the increment the slider handle must move. This defaults to 1, but now you can specify the step to slide by increments (step="25") and the handle will snap to these points. If a value in entered into the numeric input next to the slider that is outside the steps, it will round to the closest one. We borrowed this code from the jQuery UI project so thanks guys.

Zoom fixes: orientation change iOS bug and select/input zoom

If you wanted to avoid the page zooming in oddly when you rotated an iOS device into landscape mode, you needed to disable user zooming via the viewport meta tag. However, we think that it’s nice to keep user zooming enabled if at all possible so after a lot of tinkering, Scott Jehl came up with a clever hack that uses accelerometer data to determine if a device is in the process of being rotated. If it is, we temporary disable zooming to avoid the orientation bug, then quickly restore it. We’ve created a new utility (zoom.iosorientationfix.js) in jQuery Mobile that uses this technique to fix the iOS orientationchange zoom bug.

There is another utility zoom.iosfocusfix.js, which disables zoom as a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. Zoom is restored just after the focus event fires (a half second timeout).

We added a general utility: $.mobile.zoom, which as 3 members: enabled [bool], disable [function], and enable [function]. This simple utility is used to disable user scaling in devices like iOS. The disable() method disables user-scaling. The enable() method enables user-scaling. The enabled property keeps track of state. This utility is used by the two features above and can be used in custom scripting events as well.

data-enhance=false data attribute

As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be place on an element container to tells the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new data-enhance=false attribute that can be added to a container to prevent both auto-initialization and link/form hijacking. This is also available via $.fn.jqmEnhanceable. It’s important to note that because of the performance impact incurred by finding a parent element with the data-enhance=false attribute this feature must be turned on explicitly with $.mobile.ignoreContentEnabled=true.

data-ajax=false now works on containers

On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the data-ajax="false" attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting $.mobile.ignoreContentEnabled=true, the data-ajax attribute to a parent container and it will exclude all the parent link or forms from the AJAX navigation system behavior.

New docs navigation and search

We spend quite a bit of time refining our docs and we think they are pretty solid. However, there are now a lot of pages and it can be hard to find what you need simply by browsing around.

For 1.1 we’ve added a button in the upper right corner of every page that opens a searchable sitemap that contains an alphabetized list of pages in a filterable listview. Although this isn’t a true site search, we’ve used the hidden filtertext feature to load up each list item with a rich set of keywords you might be looking for. We plan on making some larger docs changes in future releases, but this seemed like a nice addition to the docs.

AMD module support

In jQuery Mobile, we’re using AMD to express dependencies between the different modules for the build scripts and to support our in-progress download builder tool. However we strip out all the AMD overhead in the final source files. It will export an anonymous AMD module if an AMD loader is present, the same way jQuery Core does it. Special thanks to James Burke (@jrburke) for jumping in and helping us polish our AMD implementation.

New ThemeRoller: Upgrade your 1.0 theme to 1.1

We’ve improved our ThemeRoller tool to let you seamlessly switch your theme between versions of jQuery Mobile. If you have a 1.0 theme you’d like to upgrade to 1.1.0, click the Import button, paste in your uncompressed 1.0 theme, then tweak and download the 1.1 version. It’s that easy.

Custom Download Builder: Coming soon

We’ve been hard at work designing and building a tool to let you build custom jQuery Mobile builds that only include the features you need. The download builder creates a zip file with custom builds of the jQuery Mobile JavaScript and CSS files based on what widgets, transitions, and features you select.

We’re happy to announce that we’re launching a early build of this for a small group of alpha testers. If you’d like to help us test, please let us know.

Upgrade notes

If upgrading from 1.0, here are a few things to keep in mind.

  • The default transition for pages in 1.1 is “fade” to ensure smooth transitions across platforms. In 1.0, the default was “slide”.
  • All transitions in 1.0 fallback to fade if the browser doesn’t support 3D transforms. This is used to shield complex animations from poorly performing platforms like Android 2.x. This fallback option is configurable.
  • The experimental touchOverflow feature is now deprecated. No errors are going to be thrown by its removal: we will keep our $.support and $.mobile.touchOverflowEnabled properties defined to avoid throwing issues in custom code that leveraged this feature.
  • The tap to toggle visibility behavior of fixed toolbars no longer supports the $.mobile.fixedToolbars.setTouchToggleEnabled(false); syntax; this has been replaced by this option: tapToggle. In 1.1.0, fixed toolbars now have a rich set of options and methods compared to 1.0.
  • The data-fullscreen="true" option for fixed toolbars used to be added to the page container in 1.0. In 1.1, this attribute is now added directly to the individual header or footer toolbars.

A Word of Thanks

We’d like to thank the 146 contributors and supporters for their incredible dedication and for being a great bunch people to work with: John Resig, Todd Parker, Scott Jehl, Kin Blas, John Bender, Tyler Benziger, Ghislain Seguin, Mat Marquis, Jason Scott, Maggie Wachs, Patty Toland, Anne-Gaelle Colom, Garann Means, Eddie Monge, Dan Heberden, Paul Irish, Rick Waldron, Ben Alman, Scott González, Jörn Zaefferer, Richard Worth, Dave Methvin, Douglas Neiner, Ralph Whitbeck, Alexandre Capt, uGoMobi, Maurice Gottlieb, Matthew Leon, Eric Hynds, Sven Franck, Jake Boone, trott, Ryan Neufeld, forresst, Gabe Hollombe, Matt Lins, jrowny, ray58750034, Frederik Lassen, Nabil Saleh, Ivan Rubanov, Brandon Johnson, Dave Hulbert, SamuelKC, Andy Matthews, eugenb1, Louy Alakkad, Hans-Peter Buniat, Dan Tao, Mike Woods, Jason Crane, Konstantin Pozin, Wu Yuntao, Chetan Jain, Asyraf Abdul Rahman, Tobias Bosch, medovob, frietsch, Bernhard Gschwantner, Deric Crago, Casey Justus, Jeffrey Way, ovargas27, depeele, Adam Messinger, James Burke, MaZderMind, Bradley Kuhn, Jorge Taylor, Mike Taylor, Divya Manian, Dion Almer, Ben Galbraith, Laurent Hasson, Conrad Seaman, Eli Fidler, Abu Obeida Bakhach, Claudio Cataldo, Jean-Christophe Cimetiere, Wai Seto, Michael Daitzman, Mano Balasubramaniam, Andrea Trasatti, David Ballmer, and countless others who contributed issue reports, code and support.

Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. First and foremost, we’d like to thank our premier sponsor Adobe for their incredible support of the project, donating three full-time developers (Kin Blas, John Bender and Tyler Benziger). We’d also like to thank sponsors Filament Group for kickstarting the project and donating the design and development time from the whole crew (Todd Parker, Scott Jehl, Mat Marquis, Maggie Wachs, Patty Toland). All three Jive Software (Ghislain Seguin), Microsoft (Sergey Grebnov), and RIM (Jason Scott) generously donate part-time development support.

Financial support is another critical way corporations support the project. We’d like to thank Research In Motion, Nokia, Microsoft, Rhomobile for contributing generously to the project to support this release. We’d also like to thank the various companies and individuals who have donated test devices to the project.

If you are interested in giving back to the project, please contact Todd Parker.

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

Microsoft CDN hosted jQuery Mobile files:

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.1.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 – Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire – Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 – Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 – Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) – Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 – Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x – Tested on the Curve 8330
  • Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Change log

Here are the highlights since 1.0:

iOS4 reports landscape when it’s in portrait (Issue 3707) – Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.

Page transitions using “slide” don’t work after the first transition (Issue 3970) – Incorrect -webkit prefix in -moz “slide” transition keyframes. Thanks for the timely fix deAtog!

Collapsible sets now respect data-corners attribute (Issue 3814) – collapsible-set AND nav were inheriting rounded corners

Added button markup hoverDelay global config option – $.mobile.buttonMarkup.hoverDelay

Horizontal grouped buttons with icons spacing too tight (Issue 3966)- Thanks uGoMobi!

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Fix checkbox radio to cope with input nested inside the label – We now support the implicit association via nesting in addition to using the for/ID pattern. Thanks jokeyrhyme!

Non-native disabled selects become native when enabled (Issue 3894) – disabled custom selects will now enhance

Blackberry – Fixed Position Toolbars Not Working (Issue 3829) – Native position:fixed support in BB5 and 6 is pretty slow/buggy so we had excluded these from seeing this CSS rule but we’ve reversed this decision and let BB do what it does even if it’s not ideal.

Added option for clear search button text – The text for the button used to clear the search input of text can be configured for all search inputs by binding to the mobileinit event and setting the $.mobile.textinput.prototype.options.clearSearchButtonText property to a string of your choosing. Thanks bjohn465!

Changing orientation on ios5 re-enables zoom (Issue 3859) – user scaling/zoom would become re-enabled after an orientationchange, even if it was locked, such as on a fixed toolbars page. Also, this change addresses @toddparker’s point that the zoom plugin does not respect meta viewport tags that have user scaling disabled at the start – in those cases, the zoom api will still be defined, but the methods won’t do anything.. and $.mobile.zoom.enabled will begin and remain false.

Intermittent 1px gap above fixed headers on Android 2.2/2.3 (Issue 3528) – By the looks of it this may have been a vestigial style used as a clearfix

Radio buttons in a control group not visible/rendering correctly in IE7 when pageloads (Issue 3837) – Ensures that absolute positioned checkboxes and radios within controlgroups are visible in IE7

showPageLoadingMsg demo does not work for android 2.3.3 (Issue 3786) – switched to mobile screenheight helper

Improvements to getScreenHeight calculation – used during transitions, but it’s exposed on $.mobile as well. For a while, it’s been returning incorrect values in iOS, as it wasn’t taking into account the browser chrome’s footer height. window.innerHeight tends to return the value we need more consistently, but it’s not supported in older browsers so I’ve included the jQuery height call as a fallback too.

vclick events don’t have pageX/pageY defined on them (Issue 3815) – Modified createVirtualEvent() so that it uses the mouseHook properties if the original event type starts with “mouse” or “click”. The original regex was only looking for “mouse”.

Checkbox & radio regression on Playbook 2.x (Issue 3792)

Support data-mini=”true” on listviews, as well as individual items within a listview.

Support data-mini=”true” applied to individual radios/checkboxes, as well as containing controlgroups.

Issue with overriding data-icon in split listview (Issue 3775) – split list icons should prefer second link, list item, and then the whole list config

data-overlay-theme bug in 1.1 rc1 (Issue 3779) – use parent, given that getInheritedTheme mimics the closest() method.

Performance improvements for checkboxradio widget – thanks dmethvin!

Listview does not allow per-listitem data-icon for split lists (Issue 3747) – split list icons now respect data-icon on LIs

$(“a”).live(“click”) returns different values on desktop browsers and on iOS safari (Issue 3686) – Replaced vclick and click .bind by the equivalent document.addEventListener. This is to ensure that these handlers will be the first to run on vclick and click. As of jQuery 1.7 delegated event handlers are run before bound handlers. This change ensure that these handlers are run before the ones handled by jQuery.

Auto-add back btn issue on pages beyond first view (Issue 3553)

Dialog Header Border Artifact in Chrome 9 (Issue 3626) – Fixed by explicitly setting border: 0 for ui-dialog header to fix chrome rendering bug. Thanks jgable!

$.mobile.listview.prototype.options.inset = true; does not work for data-filter=true (Issue 3761) – listview filter inset now respects prototype options

activeBtn is not defined (Issue 3723)

ui-btn-right/left broken in footer (Issue 3749) – Added support for these classes in footers

Document size with fixed toolbars too tall (Issue 3694) – bottom: -1px; padding-bottom: 1px on fixed footer, previously used to hide 1px “jitter” seen in many browsers during scroll, was triggering scrollbars in some browsers.

Error when there is a fixed header and no footer (Issue 3675) – prevent adding to a non jquery object in fixedToolBar

Select element text overflow issue inside of listview on iOS (Issue 2647) – overflow: hidden on text inside select menus was being ignored on iPad Safari specifically.

White flash during transitions in 1.1 RC1 (Issue 3735) – check for “overlay” theme classes, as well as bar and body to cross fade through bg color instead of white

Search Input – Focus problem (Issue 1459) – Clicking on a search input’s “clear” button now returns focus to the search input.

Collapsible incorrectly adds top, bottom corner classes to all .ui-btn-inner elements – Thanks jasonicrane!

Fix for $.mobile.fallbackTransition.slideout = “none” not working – Thanks pavliy!

Label wrapping checkbox triggers DOM_HIERARCHY_ERR (Issue 3688) – revert to wrapAll for checkbox and radio

Grouped link button in a dialog shows wrong border (Issue 3697) – `.ui-corner-top`/`.ui-corner-bottom` are no longer incorectly applied to the first and last elements in a controlgroup within a dialog page.

Theme inherited correctly on collapsible headings/sets (Issue 3699)

Radio button does not function properly in RC1 (Issue 3670) – reverted prop to attr to resolve this issue

Button highlight breaks out of icon-only buttons (Issue 3613) — Inner highlight in buttons now corectly follow the border radius of the button.

Improve select with custom menu keyboard navigation (Issue 3568) – ensure $.mobile.focusClass is used on buttons on focus/blur, focusin and focusout.

Set focus on page, not H1 on pageshow (Issue 3659) – we no longer add a tabindex attribute to the H1, since we add one to the page itself, and that’s where we send focus on pageshow

Fix keyboard controls on custom selects, previously breaking in any custom select with a header/dividers.

Added support for data-role=”dialog” (Issue 3276) – When a dialog is the first “page”-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page’s role to date-role=”dialog” to demonstrate the change.

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Added refresh method to collapsibleset widget (Issue 3529) – Fixes corner class bug in collapsible set when populated dynamically and then refreshed

Buttons not disabled in Internet Explorer (Issue 3558) – Partial fix that appropriately styles buttonMarkup elements using `.ui-disabled` in IE. This does not prevent interaction with disabled elements, that needs to be added via scripting.

Select option misalignment (Issue 3566) – Tweak default margin from enhanced selects

Checkboxes in dialogs must be wrapped in a controlgroup fieldset for correct styling (Issue 3580)

Slider in a fieldcontainer in a footer is too narrow (Issue 3586) – Scopes set fieldcontain width (25%) in header/footer toolbars to fieldcontains with ui-fieldcontain-left/right classes

Text input too wide in a toolbar (Issue 3589) – added percentage-based padding to text inputs within header/footer toolbars.

Ensure link buttons, form buttons, and selects obey ui-btn-left/right classes in headers

Make buttonMarkup reusable on the same element so it will reflect changes to options – Do not simply skip buttons that are already marked up. Instead, we recover those structural elements making up the button which were created during the first buttonMarkup call and update them to conform to the current state of the options. Thanks gabrielschulhof!

Calling focus on hidden elements breaks page on ie8 (Issue 3505) – Thanks sgrebnov!

Report the jQuery Mobile version via version so it’s accessible via JS (Issue 3479)

IE7 support improvement: replaced setAttribute(‘class’) with className property
 – Thanks sgrebnov

Added moz-prefixed transition for slider handle – This makes the flip switch slider animation work in Firefox

Taphold event fired while scrolling on Blackberry Playbook (Issue 1524) – Cause: The vmousecancel event was not being fired for ‘this’. Instead Bound vmousecancel event to document instead of ‘this’.

Switched from line-height to text-indent to accessibly hide buttons (issue 1927) – Was causing an vertical scroll bar to appear in FF9 if a button at the end of the content div is disabled / enabled. Changed ”’line-height: 999px”’ to ”’text-indent: -9999px”’. Thanks n0v1!

Close icon of dialog doesn’t work with $.mobile.defaultDialogTransition set to “none” (issue 3351). Thanks Josh Dean!

Fix issue where underlying checkboxes/radio buttons were not being updated when enhanced buttons were clicked (issue 2553) – For horizontal grouped elements

Prevent data-role=”button” from double enhancing buttons or inputs (issue 3141) – redirect from button() and buttonMarkup() to correct function for element. Thanks garann!

Fix for get_orientation() and hence getScreenHeight() not working on some devices (issue 2933) – It seems that some device/browser vendors use window.orientation values 0 and 180 to denote the “default” orientation. For iOS devices, and most other smart-phones tested, the default orientation is always “portrait”, but in some Android and RIM based tablets, the default orientation is “landscape”. Modified the orientationchange plugin so that it injects a landscape orientation media query into the document to figure out what the initial orientation is, it then makes adjustments to a portrait_map if necessary, so that we can properly decode the window.orientation value whenever get_orientation() is called.

Prevent down state class on list items when touch scrolling – Added slight delay before application of hover/down classes on touch devices, to prevent unintentional hover/down state state application when the user is scrolling the page.

More consistent focus classes on form elements, using ui-focus. Switching from outline to shdows makes the glow follow roudned corners on elements and looks better across the board. Links still use outline property. Thanks zachleat!

Toolbar buttons now truncate text to avoid overlap with title (Issue 3262) – Thanks garann!

Expose jquery.mobile as an AMD module if running in an AMD environment

Tightened up vertical spacing for form field containers at smartphone widths –
There was more spacing between elements than needed when the label and elements were stacked.

Fieldsets now work with the field contains data-role (issue #2448)

Checkbox/radio, slider, select, custom select menu performance improvements, especially for IE/WP7 speedups. Thanks sgrebnov!

Add slider step support from jQuery UI – The step attribute now works with the slider, thanks jrowny!

29 thoughts on “Announcing jQuery Mobile 1.1.0”

  2. Sebastian Tobias on said:

    Testing around locally, but since i had RC2 also running – there seems no big changes 🙂
    All working like a charm – looking forward for 1.2 features. Thanks!

  9. Rhys Lloyd on said:

    Fantastic! Looking forward to playing around and seeing what other issues we can further improve – I have an upcoming project next week which will allow me to properly sink my teeth in.

  11. Lawrence Leo on said:

    Thanks for this great release.

    Minified and Gzipped: jquery.mobile-1.1.0.min.js (24KB, ready to deploy)
    after I download the file, the file size is arround 90946…. is it the correct one? how come the filesize is that big?

  12. B on said:

    Stellar as always. The fixed toolbars, transitions and new Themeroller look great.
    THANKS !!

  13. Mark Smith on said:

    I’m deploying a mobile app using jQuery Mobile 1.1 and Phonegap on BB Torch 9800 OS6.
    The minimum page height set by calling $.mobile.getScreenHeight is too small causing the background
    styling not to stretch to fill the viewport. I believe this was broken in 1.1.

    In 1.1 $.mobile.getScreenHeight() returns 342, in 1.0 it returns 480

    Note this appears only to affect Phonegap apps on BB. Running the same app in the browser
    $.mobile.getScreenHeight() returns 420 and takes the entire viewport minus the address bar.

    The following thread seems to suggest using screen.height instead of window.innerHeight

    See:
    http://groups.google.com/group/phonegap/browse_thread/thread/57bc2861372c5a2a
    http://groups.google.com/group/phonegap/browse_thread/thread/6836d5c468101eae

    When I change $.mobile.getScreenHeight() from:

    return window.innerHeight || $( window ).height();

    to:

    return screen.height || $( window ).height();

    The page fills the entire screen.

    Obviously, this is not an ideal solution as it causes the page to be too large and becomes scrollable when viewed outside of phonegap.

    Any suggestions?

  14. Ruchir Pareek on said:

    sir it is not working properly on opera 6.5 in nokia 7210 supernova. and i would also like to suggest u that in this app at step 3 a link for the running status table{as in old trainenquiry} must be placed. this is a best site of all the time and the innovation is also too good. i liked it most. plz make it operable on all type of mobile phones.thx to RAILyatri. thx a lot. soon it will be very famous. for suggestion contact ruchir.pareek@gmail.com

  15. G.P. Shukla on said:

    this system not work in nokia E60 mobile so improve ur system to benifit max. users on multimedia set.priviouse system is so better than this ur new system. G P Shukla, Mob. 8005024205

  16. G.P. Shukla on said:

    Please tell me how can I see train running information on my Nokia E60 mobile’

  24. Karsten Gråbæk Knudsen on said:

    Does anyone know, how to make at “select regular site or mobil site” pop-up or how to do this with jQ? Need to be able to switch to the site, if selected.

  26. KendallArneaud.ME on said:

    SCRIPT65535: Unexpected call to method or property access.
    jquery.mobile-1.1.0.js, line 4323 character 4

    if ( !buttonElements ) {
    e.appendChild( buttonInner );
    }