Announcing jQuery Mobile 1.1.1

Posted on by

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

This is our first maintenance release for version 1.1 and it’s chock full of bug fixes and improvements based on community feedback and testing.

The most notable changes in this release are speedier page transitions and tap responsiveness on longer pages, smoother transitions in Cordova, and more polished form elements.

Alongside this release, the ThemeRoller Mobile tool has been updated to make it easy to upgrade existing themes to 1.1.1. A new downloader builder tool is now released as a public alpha and allows you to build custom versions of jQuery Mobile 1.1.1 that only include the modules you need.

 

jQuery Mobile 1.1.1 Final
Requires jQuery core 1.6.4 or 1.7.1

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

 

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

Key Changes

Slow tap response when clicking items in large listview on mobile devices (Issue #4340) – Slow response times and crashing when clicking on a list item (or any navigation element) far down a long page was due to the browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance so we added another condition to say that if you’re either coming FROM or going TO a page where the scroll position is 3x the height of the device’s screen, skip the transition (set it to none). This scroll position breakpoint is configurable via the new getMaxScrollForTransition function.

White flash/flicker when transitiong between 2 web pages in Phonegap/Cordova (Issue #4024) – We now add a class while the TO page is being set up for show (block display, focus, scrolling, setting height) called ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved.

Fix for slide flickering within a ios app webview (i.e. Phonegap container) (Also related to issue #4024). Thanks alexksso!

Standardize widths for all buttons and form elements (Issues: #3284, #3983, #3301, #3922, #1998, #2804, #3684, #4252, #4098, #3979, #4263, #4489) – Jasper (uGoMobi) did an incredibly detailed sweep through all the elements to ensure that each widget is as close to the the same width as possible given the constraints of CSS. In addition to width normalization, we tweaked things like count bubble position, button margin consistency, padding for icon-only buttons in controlgroup, etc.

Improvements to link styling to avoid conflicts with generic link styles (Issue #3455) – If a:visited, a:hover are defined, they will break jquery mobile buttons because of the specificity of the styles. Up to now, we only set link styles within a theme swatch but since setting link styles globally is fairly common, this defensive addition will help avoid conflicts with user styles or popular tools like the HTML5 Boilerplate

Select: Custom menu with a placeholder highlights first element although it’s not selected (Issue #4061) – Fixed by filtering placeholders out of the list of selected items Button: Adjusted ui-focus to improve the focus style for grouped buttons

Button: Fixed the icon position of notext buttons in IE7

Button: Not disabled in Internet Explorer (Issue #3558) – Conditionally add a live handler to kill clicks on .ui-disabled elements when CSS pointer-events property is not supported.

Added Modernizr’s feature test for CSS pointer-events property Select: Custom select menu accessibility with keyboard (Issue #4039)

Button: Invalid opacity value (Issue #4413) – Corrected invalid value for filter alpha opacity. Thanks Alexn!

Slider: Fill feature disappears on pagehide (Issue #3887)

Fixed headers: UpdatePagePadding() and default ui-page-header causes slight jump (Issue #4412) – Adjusted default top/bottom padding for page with fixed toolbars.

Added box-sizing border-box to grid blocks so they don’t break when padding or border is set (note: not supported by IE7)

Grid: Adjustments to grid-b and -c to fix BB Storm and Curve issues. Adjustments to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).

Navbar: Mini styling for navbar with adjusted padding top and bottom. Set right border on last button when not in toolbar. Navbar: Button sub-pixel problem (Issue #3341) – Filled gap caused by subpixel problem with negative margin.

Navbar: Items wrapping in IE7 BB5 (Issue #2270 and #2159) Adjusted grid blocks percentage width to prevent wrapping on older browsers and set it back for modern browsers, including minor adjustment to fix BB5 issue.

Added “button” element to tapToggleBlacklist Prevent scrollbars on pages with custom borders – take custom borders in account on the page when setting the min-height. Thanks ngharo!

Header: Visual issues in IE7 (Issue #4193) – Added zoom 1 to trigger HasLayout on toolbars for IE

Slide Transition with Fixed Header in App visual artifacts (Issue #4418) – We now include padding for the fixed toolbars in the 100% height of ui-mobile-viewport-transitioning element

Form: form hijacking not respecting allowCrossDomainPages (Issue #2234) – check external urls against the cross domain pages setting

Navigation: dialogHashKey is now stripped from url even if it is not an embedded page in convertUrlToDataUrl

Navigation: Support the case where the initial url contains a dialog hash key Performance improvement for getInheritedTheme – Thanks hpbuniat!

Button: Text is now prevented from being selected – for a cleaner interaction, this can be tweaked via CSS if needed

Navigation: When the initial page has a dialogHashKey, navigation breaks after link-click followed by “Back” (Issue #4423) – Handle corner case where first visited page has a dialog hash key

Slider: label ID gets overwritten (Issue #3981) – Now we create an ID for the label only if not present

Init: Proceed to hashchange handler when the initial hash contains a path – This covers cases where the hash is a path

Navigation: Bad URLs with hashes are not gracefully handled (Issue #4119) – Added regex test to see if hash is valid and if a page with that ID exists, if not load the first page.

Listview: data-mini=”true” attribute should be ignored (Issue #4114) – Mini listviews are both difficult to tap accurately and have too many complex styles to support at two sizes

Slider: Custom Active Button Class does work (Issue #4345) Listview: selects + buttons inherit wrong font-size in list with form (Issue #4254) – Thanks ebaranov!

Listview: When leaving from a page contains nested listview, pageremove event does not fire (Issue #4185)

Input buttons of type=image not rendering properly (Issue #3423) – Fixed by setting -webkit-appearance: none; on this type. This input type is no longer auto-enhanced unless a data-role=”button” is added in the markup.

Checkbox – Corner styling of inserted checkbox incorrect when in controlgroup (Issue #3496)

Can not disable ‘push state’ plugin when jQM loaded via require.js (Issue #4136) – We now call init when both mobileinit and domready have happened instead of just domready.

Dialog: navigation incorrect if certain flags are set (Issue #4320) – if hash manipulation is off, the dialog hash key is not added when the dialog appears, and the dialog’s close button does a window.history.back() by default. This causes the browser to go back to the page before the one that launched the dialog. Now when hashListeningEnabled is not set, use urlHistory to go back from the dialog

Listview: links embedded in list dividers shouldn’t be auto enhanced into buttons Related tweak here

Collapsible – add active state on tap for better visual feedback (Issue #4229)

Listviews: Button+data-iconpos=”notext” formatting issue (Issue #4227) – Style tweaks for better layout

Dialog: Double click on dialog close btn cause double back (Issue #3387) – Prevent the click-handler for “Close” acting twice

Keep urlHistory in sync with browser history even when moving to/from a #&ui-state=dialog link via Back/Forward buttons– Nav improvement

Forward history + dialog navigation issues (Issue #2656) – Do not change hash nor add history entry when displaying a dialog at a history entry that already has dialogHashKey

CollapsibleSet widget removes ui-corner-x classes from the whole DOM (Issue #4062) – removed add() function which queries the whole DOM. Thanks @MauriceG

Upgraded widget factory from jQuery UI 1.9m7 (issue #3544) – Brings a host of improvements, including widget subclassing fixes.

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.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

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

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

A Word of Thanks

We’d like to thank the community contributors and supporters for their incredible dedication to the project by contributing issue reports, bug fixes 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. We’d like to thank Adobe for donating multiple developers (John Bender, Tyler Benziger, Kin Blas), Filament Group (Todd Parker, Scott Jehl, Mat Marquis), Jive Software (Ghislain Seguin), Microsoft (Sergey Grebnov), and RIM (Jason Scott), uGoMobi (Jasper DeGroot), Intel (Gabriel Schulhof) as well as individual contributions from Anne-Gaelle Colom and Maurice Gottlieb who generously donate long-term development support to the project.

We’d like to thank all our corporate sponsors 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. Please donate devices to our test lab to help us better support all platforms.

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

Platform support in 1.1.1

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 HTML). The visual fidelity of the experience and smoothness of page transitions are 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.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), 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. 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
  • Firefox 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-12: 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-19 – 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-13 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-12 – 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

15 thoughts on “Announcing jQuery Mobile 1.1.1”

  2. NOESlS on said:

    Awesome! Keep up the great work! Also, I have found a problem. Not sure if it’s with JQM or ThemeRoller but my icons are showing up white no matter what :(. Works fine on desktop, blackberry, but not iOS.

    • Ming Yuen on said:

      check ur media queries because some android has different dpi which that trigger “different set of images” if u use themeroller…notice do a search one of the “media queries” is bugged with black/image vice versa.

  3. Johnny Cedergren on said:

    Sadly, it doesn’t seem to fix the problem with the flickering using the latest PhoneGap (Cordova). I still have to turn transitions off completely using hacks that people put together. Maybe someone else here got it to work?

  4. Robert Caldecott on said:

    Well done. My only issue is with 960grid – something must of changed with padding in the CSS as there are no longer any gaps between items when using a grid.

  5. Jeff on said:

    I have a dynamically created Select with a data-placeholder option that worked in 1.1.0 but now does not show the place holder when the page is loaded in 1.1.1.. Is there something else that needs to be done now?

  7. Adam Dehaven on said:

    Problem with the Custom Select Menus – When I use them and have the attributes data-native-menu=”false” and have a data-placeholder=”true” option, the placeholder text does not appear on the Select menu when the page loads – It’s just a blank-looking button. Is there a fix? or am I missing something?

  8. gilbertogalea on said:

    Really great, advance. Looks more compact, and working well at my BB apps.

  9. Petar Koretić on said:

    I don’t know if i’m the only one but it’s still just to slow even for simple elements. I just don’t understand how you are killing even my desktop browsers so easily. Thankfully I’ve discovered twitter bootstrap last week. Finally something that’s done right. http://twitter.github.com/bootstrap/

  10. hairycub84 on said:

    I still get white flashes in iOS Safari (especially when using the Flip animation, when it finishes everything turns white and then the page loads).

  11. Owen Berry on said:

    Hey all, firstly thanks for all the work… don’t want to just complain full stop, cause the library is still very helpful!!

    Just looking at the JS for 1.1.1, and it seems like some of the fixes are missing.
    Namely the transition flicker fixes. The CSS seems fine, since the toPreClass is in the CSS — ” ui-page-pre-in”.
    BUT, the JS changes aren’t in the download JS. I’ve added them myself, and apart from a small fix to that, it works nicely.

    Seems strange, since the toPreClass variable is there (or was that already there?).
    Anyway, commented on one of the changes too :: https://github.com/jquery/jquery-mobile/commit/d89a919fb0f5e902934d0179b73baacb0cc4fc2f#commitcomment-1590064

    Hope this helps!! 🙂