Monthly Archives: April 2011

Updates

Development Update – Week of April 21, 2011

Posted on by

Attending: Todd Parker, Scott Jehl, John Resig, Kin Blas, John Bender, Eddie Monge, Steven Black

Project communication

We’re going to try to post a summary of our weekly meeting here on the wiki and on the jQuery.org site so everyone can see what we’re up to on the project.

Going forward, all communication and meetings will take place on IRC channels for better transparency and to gain input from the jQuery Mobile community. Core dev team discussion is now in #jquerymobile-dev. For help with jQuery Mobile, please use the #jquerymobile or #jquery channels on freenode.net. Weekly jQuery Mobile team meetings will happen on the #jquery-meeting IRC channel on freenode.net every Tuesday at 2:00pm EST/11am PST.

Key issues we’re tracking now

Tops of pages missing after returning from a dialog in Safari and iPhone

https://github.com/jquery/jquery-mobile/issues/1461
 https://github.com/jquery/jquery-mobile/issues/1457
 This issue is tied to recent focus management changes. Solution noted in comments: we just need to bind to the silentscroll event for when we set focus. Kin will try to land this ASAP.

Ajax = issue re: relative paths

In A4.1 links referencing parent directory with the `../` syntax break some ajax calls. Needs testing with the forced absolute paths introduced post A4.1. Closed and created new issue: https://github.com/jquery/jquery-mobile/issues/1171

Active state stickyness issues

Buttons in jQM have 4 states: normal, hover, focus, and down (pressed) which is a bit different from the link’s :hover and :active states. Our active state is not parallel to a link’s :active, instead it’s meant to be more like and “on” or selected state that is only needed for stateful buttons or special cases (like lists) where we want to have an “on” state.
Proposed change: only set the active class on a button if we know we’re navigating so any null or # links will get the down state but not active.

The “active” class name is a bit confusing because of reasons outlined above, may be worth changing if we can find a much clearer name. Look here for synonym ideas: http://thesaurus.com/browse/Active

Navigation: changepage

• Lengthy discussion on how to proceed.

• Goals: less procedural, separate things out for readability, tightly coupled thru scoping on purpose,

• plan our re-factor on the wiki ahead of time, add high-level tests before re-factoring

• Tangent on initial conditions for tests.

• Pulling transitions from changePage().  An easy get?

• Navigating to self… legitimate in generated pages?

• Making isExternal smarter.

• Moving arguments over to a hash, rename changePage so it can act as a proxy to new one?

• Page container concept: pave the way to multi-panel tablet, handles transitions between pages in the DOM

• Followup with history.js @ https://github.com/balupton/History.js

• Kin will be available to lead the charge on this and everyone else will plug in. First step is to keep filling out the navigation mapping and planning wiki pages here and here.

Recent commits

Fix from @brukhabtu for issue 1492 – Errors when trying to delete DOM elements.

Check for existence of the bindings object before attempting to use it. Apparently jQuery core strips off any data bindings of an element before calling teardown on it to remove special event handlers.

Fix for issue 1157 – Collapsible block prevents page scrolling on iPhone 4

When we switched to virtual mouse events, I just did a straight translation of the code that existed which basically did the collapse/expand on mouseup. In order to factor in scrolling, I needed to move that code into a vclick handler and stopPropagation() and preventDefault() to make sure the button doesn’t activate.

Fix for 1407 – Bad scroll performance since A4 on iPhone 3G

– Modified vmouse code so that it uses $.data() instead of $().data() which is significantly faster.

– Modified the navigation and buttonMarkup code so they stop using live(). The vmouse code triggers several events during the touch events, which in turn causes the underlying event code to call $.closest() with the selector used during the live() call to figure out if the event should be handled. This turns out to be very expensive, so instead, we now just bind directly to the document, and walk the DOM manually to figure out if we should handle it. This is much faster since we are avoid triggering multiple nested function calls.

Fix for Issue 1424 – Adding items to listviews on a4.1 is too slow

– Modified _itemApply() to make use of item.children() and filters. Also got rid of some unused code.

– Convert .each() in refresh() to a loop.

– Cache some $list.jqmData() values so we don’t do it for each list item.

Announcements

Nightly and Up-To-Date builds

Posted on by

The jQuery Mobile project now has a few new ways to get and test the code and related resources.

Test
The test files are the latest direct pull from GitHub. The CSS and JavaScript files are not combined or minified in any way. This area is a good way to quickly test jQuery mobile and see what it is. It is also the shortest URL and thus the easiest to type into mobile phones. The test area is located at:

http://jquerymobile.com/test/

Latest
The Latest files are similar to the Nightlies with the exception that it is the latest up-to-date build that can be linked to directly. This differs from the http://jquerymobile.com/test/ files in that the JS and CSS files can be linked in your project by using one of the links below as opposed to just viewing examples.

Nightlies
The Nightlies files are a “snapshot in time” of the code at the end of that particular date. They are mostly to test a particular feature and how it changed over time.  There are a couple of ways to use the Nightlies. The first is to download a prepackaged version that can be dropped into your own project. The Nightlies area contains the following files:

  • CSS combined files
  • CSS combined and minified files
  • JavaScript combined files (Only combines the mobile files, not jQuery core)
  • JavaScript combined and minified
  • Images for the default theme

The second way is to link to the files directly without downloading them. This is not for production sites, though. The Nightlies files should only be used for testing.

The Nightlies files are located at the following location where YYYYmmdd should be substituted with the date (for example: 20110416 is April 16 2011, which is also the date of the first nightly build):

  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.js – The full JavaScript file that makes debugging easier
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.css – The full CSS file
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.min.js – The minified JS file that can be linked directly to
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.min.css – The minified CSS file that can be linked directly to
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.zip – The zipped up package of all the files necessary to deploy
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/log.txt – A log file that contains the git commit used for this date’s build (*Note: this file will no longer appear after June 2, 2011 as the information it contained is now in the JS file)
  • http://code.jquery.com/mobile/nightlies/YYYYmmdd/demos – The demo pages using this date’s build

You can also use the other locations provided on the Downloads page.

Announcements

jQuery Alpha 4.1 maintenance release

Posted on by

Thanks to everyone who helped us get Alpha 4 released last week. Overall the response has been great but there were a few important issues that cropped us once the new version was out in the wild that we wanted to address sooner as an official release.  So today, we’re release Alpha 4.1 as a maintenance release.

Demos & docs | Key changes | Additional fixes | Download & CDN

Key changes

Here are the key issues and fixes this release addresses:

PhoneGap file:// fix for Ajax navigation

After Alpha 4 was released, we continued to hear issues about Ajax requests with file:// extensions failing in PhoneGap. We discovered that the fix we landed to set the dataType: “html” parameter for all jQuery Mobile Ajax requests disappeared between commits and didn’t end up included in Alpha 4. We went ahead and re-applied this fix and have confirmation that links are now working like a charm under PhoneGap.

Virtual click tweaks

Overall, the new virtual click system seems to be working great across our target browsers and provides a centralized way to smooth out all the event differences across platforms. However, the way we were handling clicks in the new virtual click system was causing issues in certain cases: click handlers in custom code weren’t being called consistently, and if you tapped quickly on an element, touch and click target mismatches made it look like there were two click events on elements like Back buttons, list views, and other widgets.

We fixed this in 4.1 by changing the virtual click handler to fire on the click event (instead of the vclick event) and setting prevent default. This change introduced a noticeable lag in the visual feedback for the active state on lists and buttons so we made some tweaks to make the “perceived” visual performance feel as fast as A4 by applying the active state on vclick. We’ll continue to refine the events as we head towards beta, but this fix addressed most of issues we’ve been hearing about.

Scroll position fixes

Scroll position wasn’t being remembered when navigating back to a page in iOS. This was a regression from A3 and is an important part of how web pages and apps should work. We fixed this by setting the focus order on page show to 1) previously clicked item if revisiting that page 2) page title 3) first focusable item in the page. We have plans to further refine the way this works as we re-factor our page transition code to make it smoother for beta.

IE8 & 9 support

An error was causing jQuery Mobile to fail in IE8 & 9, but we’ve resolved the error by adding an activeElement conditional and pages now render suprisingly well. There are a few style tweaks needed to make this perfect, especially on form elements, but jQuery Mobile now works in IE 7, 8 and 9.

Additional fixes included in A4.1

The team is moving quickly with bug fixes and optimizations so in the last week, these issues also have been resolved and are included in 4.1.

Navigation in a multi-page configuration –  If you had a multi-page setup and if on the first page, you clicked on an anchor that linked to itself you’d see a blank page (an edge case, but possible).We fixed this by looking to see if the data-url matches the links href, and if so, it adds preventDefault and does nothing.

pagebeforehide and pagebeforeshow were returning undefined when referencing ui.prevPage and ui.nextPage. Fixed by passing a null event param for page _trigger beforehide and beforeshow (thanks Phil Barnes).

Ajax loading overlay was appearing beneath slider handles – We fixed this by setting loader z-index to be higher than the slider handles.

Checkboxes were only firing a change event when checked, but not when un-checked. We fixed the scoping issue that was causing the checkbox check to fail.

Project status and timing

We get asked all the time about exactly when jQuery Mobile 1.0 will be released and we understand that a lot of people are waiting for us to hit that milestone to use the library. As a project, we are committed to getting to 1.0 as quickly as we can while providing an exceptional user experience that works on the greatest number of devices and platforms. This is quite a challenge, but we feel it’s incredibly important delivering on the promise of the open web and universal access. Getting there will take time so we appreciate your patience.

As of A4, we are feature-complete for 1.0 and are focusing on perfomance, compatibility, bug fixes, API improvements, and documentation. In terms of timing, we were hoping to have the beta release ready for the jQuery Conference in SanFrancisco next weekend, but the complexity of landing the global namespacing and virtual click event systems for A4 combined with this maintenance release have pushed our timelines out a bit. At this point, we still have a fair amount of major platforms to debug (Nokia, BB5, etc.) and a solid list of issues to fix so beta is still a few weeks out at a minimum. The exact timing for beta and 1.0 are going to be determined by the quality of the code and device support, not a rigid timeframe, because we want to ensure that 1.0 is rock-solid.

Going forward, we’re going to be blogging more frequently with interim updates on what we’re working on so you can follow our activities as we move towards 1.0. The team is very active so we’re excited to share our progress so the community can give us more immediate feedback and take advantage of fixes as they land. As always, we maintain an active jQuery Mobile Twitter account and “jquerymobile” Channel on freenode IRC  for day-to-day updates, tips and Q&A.

Download

We provide CDN-hosted versions of jQuery Mobile for you to include into your site. These are already minified and compressed – and host the image files as well. It’ll likely be the fastest way to include jQuery Mobile in your site.

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

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

ZIP File: