jQuery Mobile 1.2.0 Release Candidate 2

Posted on by

The jQuery Mobile team is excited to announce the second release candidate for 1.2.0. We had a few bugs come in with RC1 that we wanted to fix up before going final. Notably, we’ve re-enabled the fix for selects and inputs zooming in unnecessarily in iOS6 and improved popup support in Opera Mini (though positioning is still less than ideal).

There are a ton of great new features in 1.2.0 so if you haven’t been following along, see the alpha, beta, and RC1 blog posts for full details of features and changes leading up to this RC.

We’re hoping this will be the last RC before heading to the final release. If we don’t see a showstopper bug come in, this will be the same code we’ll release as 1.2.0 stable. Please help us test and report issues before we move to the final version. Try it now!

Demos & docs | Change log | Download & CDN

Change log (since 1.2.0 RC1)

CSS

Adjusting comment to be simple apostrophe rather than special character  – Remove an unusual character in CSS comment that was causing compilation problems. Thanks @ecaron!

Core

When the hash portion of the initial URL is exactly equal to the dialog hash key, we must trigger a hashchange (Issue: #5021)

Framework, general

Added new jQM logo to docs homepage – Learn more about the new jQuery Mobile Logo

Navbar

Added clearfix for navbar (Issues: #5008 #5032) – CSS improvement to avoid styling issues when Navbars placed in listviews.

Popup

Add hashListeningEnabled to the intersection that establishes whether we will use history or not

Do not use history when there is no AJAX (Issue: #5006) – Fix for non working popups on BlackBerry 5.

Prevent positioning context bug for close buttons within popups in Opera Mini

Reuse dialog hash if already present and tack on another if it is part of the initial hash (Issue: #4994) – Popup refactoring to support browser refresh when a popup is open.

Use $.inArray, because IE does not seem to have .indexOf() on arrays

Select

Event timing difference in iOS 6 was causing zoom to be disabled and immediately re-enabled prior to the zoom taking place (Issue: #5041) – Fix for iOS 6 which reintroduces a select input page-zoom issue.

Toolbar

Added class ui-popup to tapToggleBlacklist – The tap toggle feature for fixed toolbars now is disabled when popups are open.

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.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.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

New jQuery Mobile Logo

Posted on by

The jQuery Mobile team is very excited to announce our new project logo. Up until today, we’ve been using a mobile green of the jQuery logo but we’re thrilled to now have our own unique identity.

The new logo expresses the central idea of our project: a unified UI library that adapts to all devices. The abstract, converging screens not only look cool, they represent the wide range of devices we support, from phones to tablets and desktops. The bright center point of greatest overlap is where we come in: the library that makes it possible to support this diversity with a single codebase that adapts to all sizes, input methods and capabilities.

We’d like to thank Ira F. Cummings, Ethan Marcotte, and the whole Filament Group crew for spearheading this effort.

We’ll be rolling this new logo out across the site and docs very soon.

Here are vector versions in PDF format.

jQuery Mobile 1.2.0 Release Candidate 1 Released

Posted on by

The jQuery Mobile team is excited to announce the first release candidate for 1.2.0. We only had a few serious bugs come in with our recent beta release now that those are patched up, we’re moving on the RC1. There are a ton of great new features in 1.2 so if you haven’t read up, see the 1.2 alpha blog post for full details, we’re just going to cover what’s new here.

Please help us test and report issues before we move to the final version. Try it now!

Demos & docs | Change log | Download & CDN

Note: jQuery core 1.8.x with BB 5 and iOS 3 = C grade experience

In jQuery core 1.8.0, the team removed a lot of old offset code in favor of getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() which are very widely supported. John Resig even wrote a blog post about the wonders of getBoundingClientRect() and we think this was a smart move because it cut a lot of code weight.

The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these more modern methods. When we tested jQuery Mobile on these platforms with 1.8.x, there were errors that broke the page because we use getBoundingClientRect() for the loader, popup and slider.

We’ve been coordinating with the core team to find a fix and in the forthcoming jQuery core 1.8.2 release, getBoundingClientRect() will return 0,0 if not supported to at least avoid errors. We’ve been looking to find ways to work around this method in our widgets but we’re concerned about adding a lot of code bloat to support these older browsers.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ and lack of suport for getBoundingClientRect() and don’t enhance the page in these cases. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). We’re assessing our policy on what grade we should have for browsers that jQuery core doesn’t support anymore so stay tuned on that front.

Change log (since 1.2 beta)

Checkboxradio

Remove explicit left and right margin 0 to allow margins when used in grid 
– CSS improvement for checkboxes and radios to look more graceful when placed in grids.

Core

Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828)
– Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

Moves fixed positioning blacklist to jquery.mobile.support.js – Made the frameworks browser detection for fixed positioning support a central component.

Listview

Added missing webkit prefix for border-radius on Android 2.1 and iOS 3.2.

Increase the level of specificity of the margin 0 rule for listview buttons to avoid margins when used in grid (Issue: #4945)
– CSS improvement for listviews to be more solid when placed in grids.

Navigation

Abstract backward movement in history (Issue: #4950)
– “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Phonegap

Added a note to the docs about using underscores within foldernames in PhoneGap for Android (Issue: #4991)

Popup

Adding header/content/footer border support for popups (Issue: #5000)
– Adds corner support for header/content/footer container inside popups having data-corners attribute set to true

Do not forget about the no-history-manipulation case when calling _open() 
– Popups open method improvement when no-history feature is used.

Exclude internal attributes from dom element (Issue: #4967)
– Fixed markup issue when popup is opened.

Perform the visual open only when the nav hook has been acquired (Issue: #4949)
– Fixed an iOS popup / custom select positioning issue.

Restrict the application of the exclusions to the recording of the new option value in the data-* attributes. Do still chain up to mobile.widget with every option. 
– Popup widget improvement.

Using “position: fixed” blacklist to fix popup overlays in browsers that know what they are doing with “position: fixed” to avoid monstrous overlays on long pages in some cases. 

Slider

Increase level of specificity to avoid conflicts when sliders used in a grid (Issue: #4944)
– CSS improvement for sliders to be more solid when placed in grids.

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

jQuery Mobile 1.2 Beta Released

Posted on by

The jQuery Mobile team is excited to announce the beta release of 1.2.0. Since we released the alpha a few weeks ago, we’ve been listening to your feedback and fixing as many issues as possible. We unearthed a few Android and WP browser bugs int he new popup widget that proved to be pretty tricky to work through so we ended up doing a fair amount of re-factoring to the code to work around the bugs.

As we spent a few weeks grinding away at workarounds for these browser bugs, we also landed another 60 fixes, upgraded to the UI 1.9 widget factory, and added full support for jQuery core 1.8.0 and 1.8.1. The upside is that the new code is now leaner, faster and more compatible.

Since we’ve made a fair amount of changes since alpha, we’ve decided to release this beta to help the community give the code a full runthrough to see if we are indeed ready for final release. Please help us test and report issues so we can move forward quickly. Try it now!

There are a ton of great new features in 1.2 so if you haven’t read up, see the 1.2 alpha blog post for full details, we’re just going to cover what’s new here. We’d also like to thank all our contributors who have helped make jQuery Mobile better.

Demos & docs | Change log | Download & CDN

The bugs: Real baddies

There were a few browser bugs in Android and WP7 that were very challenging for the team to debug and create workarounds for after alpha. Here is a rundown of the key bugs we’ve been wrestling with:

    • Visual z-index issues in Android 4.0 default browser (#4816 and #4874) – When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear under the overlay but was still clickable so this was just an odd a display bug. This issue was addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, so we applied this workaround to only apply to cases where there are fixed toolbars and popups with an overlay theme on Android 4.0.
    • Animating overlay opacity bug in Android 4.0 Chrome (#4915) – The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup also display significantly faster so this change is now applied across the board for all browsers. The overlay now pops into place without a transition and adding a transition isn’t offered as an option.
    • Wild scrolling in WP7.5 when closing a popup (#4784) – When closing a popup in WP7, the window would appear to scroll to random locations. Turns out this was due to a bug in WP7’s history management that would not correctly remember the scroll position when we used the history and hashchange to close the popup. After spending over a week looking at possible solutions, the team has determined that this can not be worked around. To address this bug, we have excluded just WP7 from back button support with popups so these must be closed by clicking outside the popup or using a developer-supplied close button. We also had to handle the close button behavior to work without hashchange to work with this situation. The option to track history has been exposed as the “history” option now in the popup API: http://jquerymobile.com/branches/popup-simple/docs/pages/popup/options.html
    • Multiple, sticky button focus states in WP7 –  As popups were opened and closed, the blue outline of the focus state class would remain on the buttons that launched the popups. As it turns out, this was purely a display bug in related to WP7’s buggy history implementation. This issues was also fixed by excluding WP7 from history support.

Also in 1.2 – Custom collapsible icons

We forgot to mention in the alpha post that we added the ability to configure the icons for the expanded and collapsed states of a collapsibles and collapsible sets. Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes and choosing any of the standard icons for each.

Popup history tracking: Now an option

We heard feedback at alpha that some developers didn’t want to track popups in the history stack. Using the browser Back button to dismiss popups and menus is an important UI convention on many mobile platforms but there may be use cases like an iOS app where this is less of a concern.

Since we had to exclude WP7 from the history support to workaround a bug anyway, we decided to surface this mechanism in the popup API as the history option, a boolean that defaults to true but can be set via the data-history="false" attribute or when calling popup:

$( ".selector" ).popup({ history: false });

Popups must live within the page wrapper (for now)

After alpha went out, we also heard pretty clear feedback that folks want to re-use popups across pages by placing them outside the page container. At the moment this won’t work because many widgets (listviews, toolbars) are built with the assumption that they live inside a page container for theme inheritance and enhancement to work. Until these widgets are re-factored to work outside of pages at a future release, popups should only be added within a page.

Change log (since 1.2 alpha)

Button

Override default margin if controlgroups or form elements have class ui-btn-left/right (Issue: #4713)

CSS

Remove a typo in jquery.mobile.theme CSS (Issue: #4910)
- Corrected a typo in button hover CSS. Mitch64!

Set webkit-text-size-adjust to 100% instead of “none” (Issue: #4218)
- Fixes a desktop webkit browser bug that prevents text zoom.

Collapsible

Add support for same expanded/collapsed non default icon (Issue: #4801)
- Collapsibles now can have the same non-default icon for collapsed/expanded state.

Controlgroup

Float none for select and checkboxradio ui-btn because their container div already has float left

Keep the possibility to center the controls with vertical-align property (Issue: #4765)

Make icon-only buttons default to mini in toolbars
- Toolbar buttons without text (data-iconpos="notext") now get the mini style by default.

Prevent small bottom margin that some browsers add because of display inline-block
- Horizontal controlgoups now getting centered vertical alignment to prevent a small margin, that some browsers add to buttons.

Prevent the controls inside controlgroups from being wrapped multiple times (Issue: #4716)

Core

Introduce $.mobile.supportsTouch as a supported API and resuscitated $.support.touch though it is still unsupported

Moving to jQuery 1.8 as the default version
- jQuery 1.8 (1.8.1) ist now the default version for jQuery Mobile 1.2.x

Reference widget factory version (Issue: #2838)
- jQuery UI’s widget file includes its actual version now.

Download Manager

CSS metadata were pointing at jquery.mobile.transitions.*
- Fix for the jQuery Mobile download manager.

Fixed CSS path had an extra dotdot
- Path fix for the jQuery Mobile download manager.

Grid

Grid CSS refactoring (Issue: #4835)
- Grids with more than two columns and multiple rows now get the correct CSS. Thanks diamondq!

Listview

Add extra listview autodivider check (Issue: #4901)
- If a listview was nested inside a normal list then the listviewcreate event for autodividers would also fire for the parent list causing an error as this list did not contain listview data. An extra check was added to ensure the parent list is actually a listview. Thanks marcins!

Added a “listviewbeforefilter” event (Issue: #4721)
- Listview filter function improvement.

Added filter input as a data attribute of the event

Always filter the full list of items (Issue: #4133)
- Custom filter methods for listviews now always filter all list items.

Listview autodividers: Fix for text links in list items
- Autodividers now work as expected if list items contain links.

Navbar

Capture and retrigger clicks on the parent list item element in navbars (Issue: #4663)
- Fix for an issue on chrome/android where buttons in navbars are functionless after scroll.

Move active state regain code out of _create() and into its own prototype-level function and use ._on() to invoke it during “pagebeforeshow”

Persistent navbar broken on scroll, Chrome for Android. (Issue: #4663)
- Persistent navbars now work as expected. Thanks mmavko!

Navigation

Avoid string concat where possible
- Code refining.

Handle URLs with parentheses properly (Issue: #4849)
- The regular expression used to parse the jqmData psuedo selector restricts the
use of parentheses which are valid in urls. This breaks data-ns-url selection.
The fix is to avoid the pseudo selector.

Make sure the username and password in the url are encoded (Issue: #4787)

Overwrite stale dialog urlHistory entry instead of reusing it as-is (Issue: Replace location.href references with a centralized method so we can address a XSS/cross-site-scripting issue (Issue: #4787)

Strip authority to avoid exploits in parse regex (Issue: #4787)
- As explained by @mala in Issue #4787, most browsers simply strip the authority from `location.href` anyway. We can simply mimick this more secure behavior for the browsers that don’t thereby avoiding the decoding XSS.

Popup

Add afteropen trigger to setTimeout with android fix
- The select menu’s (now that they depend on popups) require that the first item is focused after they are open. The focus of the popup itself was deferred until after the trigger of afteropen which the select menu uses to focus its first item. As a result the focus was stolen from the select menu by the popup to the popup container.

Bind vclick handler to the document on Android
- To implement click-on-screen-to-dismiss-popup one must bind the “vclick” handler to the document rather than the screen, in order to prevent unpleasantness on Android 4.0. WP7 nevertheless requires the code to remain as is, because handling the screen vclick after it has bubbled to the document causes text and inputs underneath the screen to handle and then swallow the event.

Disable popup history managment in old IE by default (Issue: #4784)
- Cause of a Windows Phone 7 (WP7) scroll position caching issue, the new popup history option is disbaled by default for old IE browsers.

Do not allow the event to bubble up to the document, after all
- Refactoring the popup close process to stop bubbling up to the document.

Do not fiddle with the focus when rapid-opening/closing during reposition (Issue: #4797)
- Fix for a native keyboard issue preventing data-input in forms in popups when popup-reposition occurs.

Eliminate the need for a popup IE6/7-specific workaround class, as well as additional scripting
- Popup background fix for IE6/7.

Enable close button when history is disabled
- Make the popup close button work even if the new popup history option is disabled.

First pass at disabling history with an option in popup
- Added a popup option for disabling URL history management. This new option sets whether to alter the URL when a popup is open to support the browsers back button. URL history management is enabled by default.

First pass at popup simplification
- Refactoring popup code for simplification.

Fixed the order of the tolerance parameters (Issue: #4856)
- The values for the popup tolerance option to set the distance between the popup and the window, now were interpreted as the documention says: top, right, bottom, left.

Focus parent link on close when opened by a parent link
- Popup calling links now get focus back when popup closed.

Hide fixed toolbars on Android ICS native browser when popups are opened (Issues: #4816 #4844 #4874)
- When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Make sure the popup is closed on destroy (including cleanup)
- Popup code refactoring

On WP7, you get “” for an empty background, not undefined, like in IE8
- Fix for a WP7 popup issue.

Properly handle popups in dialogs, make sure dialog closes on page changes
- Refactoring popup chaining from dialogs to keep proper page navigation and URL history.

Remove default fade animation from popup overlays. (Issue: #4915)
- The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup display significantly faster so this change is now applied across the board. The overlay now pops into place without a transition.

Remove link focus, unwind stack before applying focus and tabindex
- To prevent popup transition issues on Android 4.0 devices, the order of applying focus and tabindex was changed when popups are opened.

Remove styles related to popup overlay fade
- Tidied up popup CSS after removing overlay-transitions.

Resolve the popup screen deferred immediately
- Popup refactoring.

The popup screen leaves a 1px gap at the bottom of the screen to avert Android 4.0 hangage
- Popups now get a 1 Pixel bottom gap due to an display issue on Android 4.0.

Unhook hash listeners from popup when aborting

Use just the hash as a selector in IE7/WP 7.0 (Issue: #4917)
- Fixed an IE7/Windows Phone 7.0 popup open issue caused by the handling of hashes and absolute hrefs in that browsers.

Use new ._on() binding method to attach handlers such that they are removed upon _destroy()

Use ui-overlay-* for overlay theme
- Popups overlay now use the ui-overlay class

Use widget factory to trigger events

Slider

Correct slider to use _on, and guard the unbinding test

Merge branch ‘memory-leaks’
- Slider widget functional and memory improvements

Move _preventDocumentDrag function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Move _sliderMouseUp function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Partly fixes an issue on Safari/Mac where the input width is decreased when the browser implements the spinner

Textinput

Move _keyup function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Unbind document handlers to prevent memory leaks on textinput

Toolbar

A negative indent of -99999em can cause native Android 4.x to freak out, since its so absurdly high. Switched to -9999px.

Prevent `0` from being appended to the document when using a persistent footer with jQuery 1.8.x (Issue: #4887)

Widget Factory

Upgrade widget factory to 1.9 beta version (Issue: #4629)

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