From 37fe2cc6a31b563fa775f2cf916108b1a6b577a6 Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Thu, 6 Dec 2012 16:03:07 -0700 Subject: [PATCH 01/52] listview filter: autocomplete demo issue #5096 --- docs/demos/index.html | 1 + .../listview-filter-autocomplete.html | 80 +++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 docs/demos/listviews/listview-filter-autocomplete.html diff --git a/docs/demos/index.html b/docs/demos/index.html index 326b9d1eb62..48b30fc32bb 100644 --- a/docs/demos/index.html +++ b/docs/demos/index.html @@ -49,6 +49,7 @@

Demos

  • Listviews
  • Listviews
  • Listview Filter & Autodividers
    • +
  • Autocomplete from a remote source using listview
  • Listview Forms
  • Collapsible listview
  • Grids
    • diff --git a/docs/demos/listviews/listview-filter-autocomplete.html b/docs/demos/listviews/listview-filter-autocomplete.html new file mode 100644 index 00000000000..b4f034e67d9 --- /dev/null +++ b/docs/demos/listviews/listview-filter-autocomplete.html @@ -0,0 +1,80 @@ + + + + + + Listview Filter & Autodividers - jQuery Mobile Demos + + + + + + + + +
    + +
    +

    Listview Autocomplete

    + Home +
    + +
    + +
    + +
    +
      +
      + + +
      + +
      + +
      +

      +

      © 2012 jQuery Foundation and other contributors

      +
      + +
      + + + From 981307fb191b488bd47cd8dabf1cb6e9d7b2b6e3 Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Mon, 10 Dec 2012 20:40:43 -0700 Subject: [PATCH 02/52] Demos: Autocomplete. Code style --- .../listview-filter-autocomplete.html | 40 +++++++++---------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/demos/listviews/listview-filter-autocomplete.html b/docs/demos/listviews/listview-filter-autocomplete.html index b4f034e67d9..bab1ddd4a56 100644 --- a/docs/demos/listviews/listview-filter-autocomplete.html +++ b/docs/demos/listviews/listview-filter-autocomplete.html @@ -10,22 +10,18 @@ @@ -55,25 +51,25 @@

      Listview Autocomplete

      Home - +
      - +
      - +
      -
        +
          - +
          - +

          © 2012 jQuery Foundation and other contributors

          - + From b3166c936b94201beb8a180d6af6ebc3e1cccfb9 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 12 Dec 2012 11:07:38 -0500 Subject: [PATCH 03/52] added fixedToolbar.workarounds to mobile.js --- js/jquery.mobile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index d119faf23e4..938807cd89f 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -29,6 +29,7 @@ define([ './widgets/controlgroup', './jquery.mobile.links', './widgets/fixedToolbar', + './widgets/fixedToolbar.workarounds' './widgets/popup', './widgets/table', './widgets/table.columntoggle', From c6563da96d95b769d677c66f3e692aa2c50478bf Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 12 Dec 2012 11:14:31 -0500 Subject: [PATCH 04/52] mobile.js missing comma --- js/jquery.mobile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index 938807cd89f..4b13bfbda24 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -29,7 +29,7 @@ define([ './widgets/controlgroup', './jquery.mobile.links', './widgets/fixedToolbar', - './widgets/fixedToolbar.workarounds' + './widgets/fixedToolbar.workarounds', './widgets/popup', './widgets/table', './widgets/table.columntoggle', From 5b8d80683229c8c1befb346b74fb91ff2e513f70 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 12 Dec 2012 15:37:41 -0500 Subject: [PATCH 05/52] Checkboxradio: Remove fieldset from being a form MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit owner so that radios in different fieldsets are properly associated. Fixes: #5366 - Enhanced radio buttons stay checked when others in group are clicked --- js/widgets/forms/checkboxradio.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/widgets/forms/checkboxradio.js b/js/widgets/forms/checkboxradio.js index b35234a6225..d416ef984b8 100644 --- a/js/widgets/forms/checkboxradio.js +++ b/js/widgets/forms/checkboxradio.js @@ -154,7 +154,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, { return this.element; } - return this.element.closest( "form, fieldset, :jqmData(role='page'), :jqmData(role='dialog')" ) + return this.element.closest( "form, :jqmData(role='page'), :jqmData(role='dialog')" ) .find( "input[name='" + this.element[0].name + "'][type='" + this.inputtype + "']" ); }, From 64a8d97d92eb932fcf565203e9257192716f862d Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Thu, 13 Dec 2012 00:17:04 +0200 Subject: [PATCH 06/52] Fixed toolbar: Revert to using .one(). Re: #5361 --- js/widgets/fixedToolbar.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/js/widgets/fixedToolbar.js b/js/widgets/fixedToolbar.js index e18a9f96a27..5efc07b9195 100644 --- a/js/widgets/fixedToolbar.js +++ b/js/widgets/fixedToolbar.js @@ -166,12 +166,9 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer ); - this._on( ui.nextPage, { - pageshow: function() { - nextHeader.prependTo( ui.nextPage ); - nextFooter.appendTo( ui.nextPage ); - this._off( ui.nextPage, "pageshow" ); - } + ui.nextPage.one( "pageshow", function() { + nextHeader.prependTo( this ); + nextFooter.appendTo( this ); }); } } From 8e8b83a8ded9c522dcf60d1fb00ff40f79e5b3a1 Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Thu, 13 Dec 2012 09:27:42 +0200 Subject: [PATCH 07/52] Navigation: vclick handler: Do not avoid removing active class off button that already has it This is a revert of 35eea35a42aba78146786d67fef6f5fc7985d701 and makes our faulty handling of the double vclick on iOS look even worse, but the correct solution for iOS is not to fix the button active-indication, but to fix the double-vclick-but-no-click problem - see #5149 --- js/jquery.mobile.navigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index bbbbd6dfff6..c2caf0844c1 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -1384,7 +1384,7 @@ define( [ $btn = $btn.closest( ".ui-btn" ); } - if ( $btn.length > 0 && !( $btn.hasClass( $.mobile.activeBtnClass ) || $btn.hasClass( "ui-disabled" ) ) ) { + if ( $btn.length > 0 && !$btn.hasClass( "ui-disabled" ) ) { removeActiveLinkClass( true ); $activeClickedLink = $btn; $activeClickedLink.addClass( $.mobile.activeBtnClass ); From b618f6af1734154587cf2af3b9a39e06fae8e288 Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Thu, 13 Dec 2012 15:23:23 +0200 Subject: [PATCH 08/52] Unit tests: event: $.each will no longer treat a comma-separated list as array-like - use concat instead. --- tests/unit/event/event_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/event/event_core.js b/tests/unit/event/event_core.js index 8f807a99993..c6e59ac9f10 100644 --- a/tests/unit/event/event_core.js +++ b/tests/unit/event/event_core.js @@ -15,7 +15,7 @@ setup: function(){ // ensure bindings are removed - $.each(events + "vmouseup vmousedown".split(" "), function(i, name){ + $.each( events.concat( "vmouseup vmousedown".split(" ") ), function(i, name){ $("#qunit-fixture").unbind(); }); From fe3ea40339156ef93bca8317a395c6de71ddfd6b Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Thu, 13 Dec 2012 16:59:32 +0200 Subject: [PATCH 09/52] Navigation: The first urlHistory entry cannot be a stale dialog hash state --- js/jquery.mobile.navigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index c2caf0844c1..a7d5f409a17 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -1132,7 +1132,7 @@ define( [ // However, if a dialog is already displayed at this point, and we're // about to display another dialog, then we must add another hash and // history entry on top so that one may navigate back to the original dialog - if ( active.url && active.url.indexOf( dialogHashKey ) > -1 && !$.mobile.activePage.is( ".ui-dialog" ) ) { + if ( urlHistory.activeIndex > 0 && active.url && active.url.indexOf( dialogHashKey ) > -1 && !$.mobile.activePage.is( ".ui-dialog" ) ) { settings.changeHash = false; alreadyThere = true; } From 7ab7cf8312dbdc20fcb2d03ee6546121a133a082 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Tue, 11 Dec 2012 14:33:51 +0100 Subject: [PATCH 10/52] Added fallback for older browsers to swipe list demo CSS, changed a heading. --- docs/demos/swipe/swipe-list.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/demos/swipe/swipe-list.html b/docs/demos/swipe/swipe-list.html index ec17fc6755e..7467b70c193 100644 --- a/docs/demos/swipe/swipe-list.html +++ b/docs/demos/swipe/swipe-list.html @@ -124,7 +124,10 @@ } /* Custom styling for the popup */ #confirm { - border: 1px solid rgba(4,64,98,.4); + border: 1px solid; + border-color: #044062; /* Fallback for older browsers */ + border-color: rgba(4,64,98,.4); + background: #456f9a; /* Fallback for older browsers */ background: rgba(69,111,154,.8); -moz-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3); -webkit-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3); @@ -163,7 +166,7 @@

          Swipe list demo

          -

          Using swipe event to remove a list item

          +

          Swipe to remove a list item

          This demo shows how you can remove list items by swiping left or right. For devices without touchscreen there is a delete button. This demo also contains a custom styled confirmation popup.

          From 81545e5fab643d9479454af2f91d081ddbb1b915 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 12 Dec 2012 08:31:37 +0100 Subject: [PATCH 11/52] Removed unwanted class from fullscreen fixed toolbars page in docs. --- docs/toolbars/bars-fullscreen.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/toolbars/bars-fullscreen.html b/docs/toolbars/bars-fullscreen.html index 683f7b8eab4..345733f2532 100644 --- a/docs/toolbars/bars-fullscreen.html +++ b/docs/toolbars/bars-fullscreen.html @@ -58,7 +58,7 @@

          More in this section

          -
          +

          Fullscreen Fixed Footer

          From eea13442612ad2594b336b7b4eb8ba7937d43dba Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 12 Dec 2012 08:32:55 +0100 Subject: [PATCH 12/52] Reduced code of swipe list demo and added active state. --- docs/demos/swipe/swipe-list.html | 83 +++++++++++++++----------------- 1 file changed, 39 insertions(+), 44 deletions(-) diff --git a/docs/demos/swipe/swipe-list.html b/docs/demos/swipe/swipe-list.html index 7467b70c193..e455b34ce62 100644 --- a/docs/demos/swipe/swipe-list.html +++ b/docs/demos/swipe/swipe-list.html @@ -13,26 +13,48 @@ $( document ).on( "pageinit", "#demo-page", function() { // Swipe to remove list item - $( document ).on( "swipeleft swiperight", "#list .ui-li", function( event ) { - var dir = event.type === "swipeleft" ? "left" : "right", - listitem = $( this ); + $( document ).on( "swipeleft swiperight", "#list li.ui-li", function( event ) { + var listitem = $( this ), + // These are the classnames used for the CSS transition + dir = event.type === "swipeleft" ? "left" : "right", + // Check if the browser supports the transform (3D) CSS transition + // TO DO: CHANGE INTO "$.mobile.support.cssTransform3d" WHEN THE SUPPORT TEST HAS BEEN FIXED: #5359 + transition = $.mobile.support.touch ? dir : false; + + confirmAndDelete( listitem, transition ); + }); + // If it's not a touch device... + if ( ! $.mobile.support.touch ) { + + // Remove the class that is used to hide the delete button on touch devices + $( "#list" ).removeClass( "touch" ); + + // Click delete split-button to remove list item + $( ".delete" ).on( "click", function() { + var listitem = $( this ).parent( "li.ui-li" ); + + confirmAndDelete( listitem ); + }); + } + + function confirmAndDelete( listitem, transition ) { + // Set the list item to the active state + listitem.addClass( $.mobile.activeBtnClass ); // Inject topic in confirmation popup after removing any previous injected topics $( "#confirm .topic" ).remove(); listitem.find( ".topic" ).clone().insertAfter( "#question" ); - // Show the confirmation popup $( "#confirm" ).popup( "open" ); - + // Proceed when the user confirms $( "#confirm #yes" ).on( "click", function() { - - // Check if the browser supports the transform (3D) CSS transition - // TO DO: CHANGE .touch INTO .cssTransform3d WHEN THE SUPPORT TEST HAS BEEN FIXED: #5359 - if ( $.mobile.support.touch ) { + // Remove with a transition + if ( transition ) { listitem - // Add the class for the transition - .addClass( dir ) + .removeClass( $.mobile.activeBtnClass ) + // Add the class for the transition direction + .addClass( transition ) // When the transition is done... .on( "webkitTransitionEnd transitionend otransitionend", function() { // ...the list item will be removed @@ -41,47 +63,20 @@ $( "#list" ).listview( "refresh" ).find( ".ui-li.border" ).removeClass( "border" ); }) // During the transition the previous list item should get bottom border - .prev( ".ui-li" ).addClass( "border" ); + .prev( "li.ui-li" ).addClass( "border" ); } - // If the CSS transition isn't supported just remove the list item and refresh the list + // If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list else { listitem.remove(); $( "#list" ).listview( "refresh" ); } }); - }); - - // If it's not a touch device... - if ( ! $.mobile.support.touch ) { - - // Remove the class that is used to hide the delete button on touch devices - $( "#list" ).removeClass( "touch" ); - - // Click delete split-button to remove list item - $( ".delete" ).on( "click", function() { - var splitbutton = $( this ); - - // Inject topic in confirmation popup after removing any previous injected topics - $( "#confirm .topic" ).remove(); - splitbutton.parent( ".ui-li" ).find( ".topic" ).clone().insertAfter( "#question" ); - - // Show the confirmation popup - $( "#confirm" ).popup( "open" ); - - $( "#confirm #yes" ).on( "click", function() { - - // Remove the list item and refresh the list - splitbutton.parent( ".ui-li" ).remove(); - $( "#list" ).listview( "refresh" ); - }); + // Remove active state and unbind when the cancel button is clicked + $( "#confirm #cancel" ).on( "click", function() { + listitem.removeClass( $.mobile.activeBtnClass ); + $( "#confirm #yes" ).off(); }); } - - // Unbind when the cancel button is clicked - $( "#confirm #cancel" ).on( "click", function() { - $( "#confirm #yes" ).off(); - }); - }); + + + + +
          + +
          +

          Buenos Aires

          + Back +
          +
          + +
          + +
          + Close +

          At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the Río de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. source: inautonews.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + diff --git a/docs/demos/swipe/ct.html b/docs/demos/swipe/ct.html new file mode 100644 index 00000000000..e1db1bdf201 --- /dev/null +++ b/docs/demos/swipe/ct.html @@ -0,0 +1,142 @@ + + + + + + Cape Town + + + + + + + + + + + + +
          + +
          +

          Cape Town

          + Back +
          +
          + +
          + +
          + Close +

          Although it’s the youngest official language in the world, Afrikaans is most widely spoken and is home language for 40% of the Cape's population. The remainder of the population speaks either Xhosa or English as a home language. source: gotravel24.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + diff --git a/docs/demos/swipe/ny.html b/docs/demos/swipe/ny.html new file mode 100644 index 00000000000..6419e293a13 --- /dev/null +++ b/docs/demos/swipe/ny.html @@ -0,0 +1,142 @@ + + + + + + New York + + + + + + + + + + + + +
          + +
          +

          New York

          + Back +
          +
          + +
          + +
          + Close +

          Although many legends exist about the origin of New York City's nickname, the Big Apple, most historians agree that it can be traced back to a writer who covered horse racing in the 1920s. In The Morning Telegraph, he wrote that stable hands often referred to New York as the Big Apple, meaning that any thoroughbred that raced in New York had reached the pinnacle of racing. source: nylady.hubpages.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + diff --git a/docs/demos/swipe/pa.html b/docs/demos/swipe/pa.html new file mode 100644 index 00000000000..8e9b0a1bd90 --- /dev/null +++ b/docs/demos/swipe/pa.html @@ -0,0 +1,142 @@ + + + + + + Paris + + + + + + + + + + + + +
          + +
          +

          Paris

          + Back +
          +
          + +
          + +
          + Close +

          Each year, 44 million tourists visit Paris and the surrounding Ile de France region. Paris is year after year the most visited city in the world. source: parisdigest.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + diff --git a/docs/demos/swipe/sl.html b/docs/demos/swipe/sl.html new file mode 100644 index 00000000000..1608b421643 --- /dev/null +++ b/docs/demos/swipe/sl.html @@ -0,0 +1,142 @@ + + + + + + Seoul + + + + + + + + + + + + +
          + +
          +

          Seoul

          + Back +
          +
          + +
          + +
          + Close +

          Seoul, officially the Seoul Special City, is the capital and largest city of South Korea. With a population of over 10 million, it is one of the world's largest cities. The Seoul National Capital Area, which includes the Incheon metropolis and most of Gyeonggi province, has 24.5 million inhabitants. source: bezbrige.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + diff --git a/docs/demos/swipe/swipe-page.html b/docs/demos/swipe/swipe-page.html new file mode 100644 index 00000000000..008588b29c3 --- /dev/null +++ b/docs/demos/swipe/swipe-page.html @@ -0,0 +1,139 @@ + + + + + + Swipe page demo - jQuery Mobile Demos + + + + + + + + + + + + +
          + +
          +

          Swipe page demo

          + Home +
          + +
          + +
          + +

          Swipe to navigate

          + +
          +

          This demo shows how you can use the swipe event to navigate between pages. Here you can see the JavaScript and CSS source. On each of the demo pages you can see the markup source as well.

          + +

          Open swipe page demo

          +
          + +
          + +
          + +
          + + + diff --git a/docs/demos/swipe/sy.html b/docs/demos/swipe/sy.html new file mode 100644 index 00000000000..60bbfced438 --- /dev/null +++ b/docs/demos/swipe/sy.html @@ -0,0 +1,142 @@ + + + + + + Sydney + + + + + + + + + + + + +
          + +
          +

          Sydney

          + Back +
          +
          + +
          + +
          + Close +

          The Opera House provides 45,000 square metres (11 acres) of usable office space out of 18,000 square metres (4.5 acres) of land. It is 183 metres (600 feet) tall and about 120 metres (388 feet) wide at its widest point. It is supported on 580 concrete piers sunk up to 25 metres below sea level. It has about 1000 rooms. It has five theatres, five rehearsal studios, two main halls, four restaurants, six bars and numerous souvenir shops. source: sheppardsoftware.com

          +
          + +
          + +
          +
          + + +
          + + Trivia +
          + +
          + + + From 5eecbc25176eea055c2cbd90682bc56feb21f1cb Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Fri, 14 Dec 2012 00:26:46 +0200 Subject: [PATCH 14/52] Demos: Highlight syntax in AJAXed-in pages as well --- docs/demos/_assets/js/jqm-demos.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demos/_assets/js/jqm-demos.js b/docs/demos/_assets/js/jqm-demos.js index 6f5feb67f9b..f79a40f66b3 100644 --- a/docs/demos/_assets/js/jqm-demos.js +++ b/docs/demos/_assets/js/jqm-demos.js @@ -172,7 +172,7 @@ $( document ).on( "pagebeforecreate", "[data-role='page']", function() { $( this ).find( "[data-demo-html='true'], [data-demo-js], [data-demo-css], [data-demo-php]" ).viewSourceCode(); SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['auto-links'] = false; - SyntaxHighlighter.all(); + SyntaxHighlighter.highlight(); }); $( document ).on( "pageinit", function() { From dd46cf83c350488534302fecba76788445228ac8 Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Fri, 14 Dec 2012 00:41:16 +0200 Subject: [PATCH 15/52] Demos: Copy-editing "RWD Basics" --- docs/demos/grids/rwd-basics.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/demos/grids/rwd-basics.html b/docs/demos/grids/rwd-basics.html index d9a8fe9b27f..d4f617ee692 100644 --- a/docs/demos/grids/rwd-basics.html +++ b/docs/demos/grids/rwd-basics.html @@ -39,19 +39,19 @@

          Introduction to Responsive Web Design

          Responsive and progressive enhancement

          -

          In addition to these three core RWD principles, we advocate following progressive enhancement (PE) practices which always starts with semantic HTML which will work on any device, then unobtrusively layers in advanced CSS and JS only for capable browsers. This provides a solid foundation for the device-level optimizations that RWD provides and is how the jQuery Mobile library is built.

          +

          In addition to these three core RWD principles, we advocate following progressive enhancement (PE) practices. This means always starting with semantic HTML which will work on any device, then unobtrusively layering in advanced CSS and JS only for capable browsers. This provides a solid foundation for the device-level optimizations that RWD provides and is how the jQuery Mobile library is built.

          Responsive and responsible

          When working with RWD, it's very important to consider performance to ensure that you're not simply taking a heavy desktop site and shrinking it down to mobile screens. We recommend following a "mobile-first" approach to keep development focused on reducing bandwidth, server requests and optimizing source order.

          -

          When building a page, start by creating the lightest and most semantic HTML possible. Think about how the source order of the markup would work with you didn't have CSS or JS. Do not include code that only is needed for larger viewports and hide it at smaller widths, instead use AJAX to conditionally load these assets when larger screens are detected via JS.

          +

          When building a page, start by creating the lightest and most semantic HTML possible. Think about how the source order of the markup would work if you didn't have CSS or JS. Do not include code that is only needed for larger viewports and hide it at smaller widths. Instead, use AJAX to conditionally load these assets when larger screens are detected via JS.

          -

          When writing CSS for a responsive site or app, it's usually most efficient to write all the core typography and basic style elements outside of a media query to form the styles for the smallest devices, such as phones. This is a good approach because the majority of these core styles are usually also shared at wider widths, albeit in a different layout and it leverages the cacading power of CSS. Build up breakpoints using multiple min-width media queries to layer in additional style rules that should only apply above a certain screen width.

          +

          When writing CSS for a responsive site or app, it's usually most efficient to write all the core typography and basic style elements outside of a media query to form the styles for the smallest devices, such as phones. This is a good approach because the majority of these core styles are usually also shared at wider widths, albeit in a different layout and it leverages the cascading power of CSS. Build up breakpoints using multiple min-width media queries to layer in additional style rules that should only apply above a certain screen width.

          For images in your pages, we recommend starting with images sized for mobile screens in the markup. It doesn't make sense to serve a 1,000 pixel wide photo to a smartphone with a 480 pixel max resolution because this is a waste of bandwidth and memory. Instead, include an image targeted for a mobile size. Add a width: 100%; style rule to make images scale to the page or container, but not larger because this would look blurry.

          -

          For larger or higher resolution screens, there are a wide range of JS-based techniques and services to conditionally load a higher quality image. The forthcoming pictureelement will address the need to handle multipel image sources natively in HTML and can be used today with a polyfill script.

          +

          For larger or higher resolution screens, there is a wide range of JS-based techniques and services to conditionally load a higher quality image. The forthcoming pictureelement will address the need to handle multiple image sources natively in HTML and can be used today with a polyfill script.

          Always look for ways to limit the number of server requests on a page by concatenating files into a single request and always use minification and compression (gzip).

          @@ -66,13 +66,13 @@

          Working responsively in jQuery Mobile

        • Create a style override stylesheet and include it after the jQuery Mobile framework stylesheet. This will hold all your custom styles, tweaks to the default widgets and media queries.
        • Start by writing the styles you want to see at the narrowest screen width (i.e. "mobile first"). These should be outside a media query. This mobile-first approach is efficient because you can lay down the core typography, colors and styles for mobile knowing that these tend to also be used for wider breakpoints.
        • Choose the breakpoints based on your content, not a specific device. Since there are devices of every imaginable width, it's smarter to choose breakpoints based on how your content looks in your design system. As you re-size the window to wider widths, identify where your content hits a point where it could adapt to take advantage of a wider width.
          • -
        • Write media queries widths in ems, not pixels. This ensures the layout will adapt to font size changes in addition to screen widths. To calculate the width in ems, divide the target breakpoint in pixels (320px) by 16px (the default font size) to get the em-based width (20em).
          • +
        • Write media queries' widths in ems, not pixels. This ensures the layout will adapt to font size changes in addition to screen widths. To calculate the width in ems, divide the target breakpoint in pixels (320px) by 16px (the default font size) to get the em-based width (20em).
        • Use min-width breakpoints that build on top of the mobile styles. The first breakpoint applies layout adjustments on top of the standard mobile styles so these can be fairly lightweight. Additional min-width breakpoints can be added for even wider screens that each build on the previous breakpoint styles.
        • To override framework styles only for smaller screens, use a max-width breakpoint instead. This allows you to constrain your style overrides to only apply below a certain screen width. Above this width, all the normal styles will apply so this is good for certain types of overrides.

          • Putting it together

          -

          Here is a simple skeleton of a mobile-first stylesheet that starts with mobile first styles, then builds up a responsive layout by adding two breakpoints:

          +

          Here is a simple skeleton of a mobile-first stylesheet that starts with mobile-first styles, then builds up a responsive layout by adding two breakpoints:

          
 /* Start with core styles outside of a media query that apply to mobile and up */
 /* Global typography and design elements, stacked containers */

From a6b124198f059ae55e0371c7cadb4902a5385b1d Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof 
Date: Fri, 14 Dec 2012 01:31:20 +0200
Subject: [PATCH 16/52] Demos: Grids: More copy-editing

---
 docs/demos/grids/grid-custom.html | 2 +-
 docs/demos/grids/grid-stack.html  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/demos/grids/grid-custom.html b/docs/demos/grids/grid-custom.html
index b24d10d0cc6..af99c30bc33 100644
--- a/docs/demos/grids/grid-custom.html
+++ b/docs/demos/grids/grid-custom.html
@@ -11,7 +11,7 @@
 	
 	
 	
-	
+	
 	
-    
 
 
 
@@ -117,7 +103,7 @@
 	
          
 		
          Buenos Aires
          
         Back
-		
          
+		
          
     
          
 	
 	
          
diff --git a/docs/demos/swipe/ct.html b/docs/demos/swipe/ct.html
index 00167c16db7..d8179f0f5ac 100644
--- a/docs/demos/swipe/ct.html
+++ b/docs/demos/swipe/ct.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
 
@@ -117,7 +103,7 @@
 	
          
 		
          Cape Town
          
         Back
-		
          
+		
          
     
          
 	
 	
          
diff --git a/docs/demos/swipe/ny.html b/docs/demos/swipe/ny.html
index b4eefd8dd58..b642a09ee5e 100644
--- a/docs/demos/swipe/ny.html
+++ b/docs/demos/swipe/ny.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
 
@@ -117,7 +103,7 @@
     
          
         
          New York
          
         Back
-		
          
+		
          
     
          
   
 	
          
diff --git a/docs/demos/swipe/pa.html b/docs/demos/swipe/pa.html
index e38a038cc80..d54b3ffb983 100644
--- a/docs/demos/swipe/pa.html
+++ b/docs/demos/swipe/pa.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
 
@@ -117,7 +103,7 @@
 	
          
 		
          Paris
          
         Back
-		
          
+		
          
     
          
 	
 	
          
diff --git a/docs/demos/swipe/sl.html b/docs/demos/swipe/sl.html
index ef773563967..5d653eec052 100644
--- a/docs/demos/swipe/sl.html
+++ b/docs/demos/swipe/sl.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
   
@@ -117,7 +103,7 @@
 	
          
 		
          Seoul
          
         Back
-		
          
+		
          
     
          
 	
 	
          
diff --git a/docs/demos/swipe/swipe-page.html b/docs/demos/swipe/swipe-page.html
index 4dbf4b4a83b..ed337abe950 100644
--- a/docs/demos/swipe/swipe-page.html
+++ b/docs/demos/swipe/swipe-page.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
 
@@ -125,7 +111,7 @@ 
          Swipe page demo
          
         
         	
          Swipe to navigate
          
         
-            
          
+            
          
             	
          This demo shows how you can use the swipe event to navigate between pages. We using single HTML files for each page. Here you can see the JavaScript and CSS source. On each of the demo pages you can see the page markup as well.
          
                 
                 
          Open swipe page demo
          
diff --git a/docs/demos/swipe/sy.html b/docs/demos/swipe/sy.html
index eb6dbc04e95..3b3926a4f5c 100644
--- a/docs/demos/swipe/sy.html
+++ b/docs/demos/swipe/sy.html
@@ -53,7 +53,7 @@
 			}
 		});
     
-	
-    
 
 
 
@@ -117,7 +103,7 @@
 	
          
 		
          Sydney
          
         Back
-		
          
+		
          
     
          
 	
 	
          

From 7c12806a0244bee8aaca5c8e3425e8fa0332564c Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Fri, 14 Dec 2012 12:26:39 +0100
Subject: [PATCH 25/52] Updated PHP source code view in demo template.

---
 docs/demos/_demo-template/index.html | 44 ++++++++++++++--------------
 docs/demos/_demo-template/source.php |  4 +++
 2 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 docs/demos/_demo-template/source.php

diff --git a/docs/demos/_demo-template/index.html b/docs/demos/_demo-template/index.html
index a9f10d339d6..b3ea1c391e0 100644
--- a/docs/demos/_demo-template/index.html
+++ b/docs/demos/_demo-template/index.html
@@ -36,28 +36,28 @@ 
          Demo title
          
 	
 	
          
 	
-		
          
-		
-			
          How does "view source code" work
          
-			
-			
          
-            	
          This is a div with...
          
-				
          data-demo-html="true" to include the markup in this div in the source code view
          
-				
          data-demo-js="true" to include all scripts from the head in the source code view
          
-				
          data-demo-css="true" to include all style from the head in the source code view
          
-                
          data-demo-php="fileName" to include PHP script from file-name.php in the source code view
           
-			
          
-
-			
          Specify which markup, script or style to show
          
-
-			
          
-				
          This is a div with...
          
-				
          data-demo-html="#myMarkup" to include specific markup in the source code view
          
-				
          data-demo-js="#myScript" to include a specific script from the head in the source code view
          
-				
          data-demo-css="#myStyle" to include a specific style from the head in the source code view
             
-			
          
-            					
-		
          
+        
          
+        
+            
          How does "view source code" work
          
+            
+            
          
+                
          This is a div with...
          
+                
          data-demo-html="true" to include the markup in this div in the source code view.
          
+                
          data-demo-js="true" to include all scripts from the head in the source code view.
          
+                
          data-demo-css="true" to include all style from the head in the source code view.
          
+            
          
+            
+            
          Specify which markup, script or style to show
          
+            
+            
          
+                
          This is a div with...
          
+                
          data-demo-html="#myMarkup" to include specific markup in the source code view.
          
+                
          data-demo-js="#myScript" to include a specific script from the head in the source code view.
          
+                
          data-demo-css="#myStyle" to include a specific style from the head in the source code view.
          
+                
          data-demo-php="source.php" to include PHP script from source.php, which is the plain text version of file-name.php, in the source code view (see files in this folder).
           
+            
          
+                
+        
          
 	
 	
          
 	
diff --git a/docs/demos/_demo-template/source.php b/docs/demos/_demo-template/source.php
new file mode 100644
index 00000000000..a994303051d
--- /dev/null
+++ b/docs/demos/_demo-template/source.php
@@ -0,0 +1,4 @@
+

From 9d474beb4fbdaf2afbaf23dab3bf61c1fb5a50f1 Mon Sep 17 00:00:00 2001
From: Ghislain Seguin 
Date: Fri, 14 Dec 2012 07:54:57 -0700
Subject: [PATCH 26/52] Demos: Use .on( "pageinit" ) instead of $( document
 ).ready()

---
 docs/demos/listviews/listview-filter-autocomplete.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/demos/listviews/listview-filter-autocomplete.html b/docs/demos/listviews/listview-filter-autocomplete.html
index bab1ddd4a56..d1998de6e68 100644
--- a/docs/demos/listviews/listview-filter-autocomplete.html
+++ b/docs/demos/listviews/listview-filter-autocomplete.html
@@ -10,7 +10,7 @@
 	
 	
     
 
 
-
          
+
          
 
 	
          
 		
          Listview Autocomplete
          

From 2afbb072b2509bb36382c312a7623b156a379ed7 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof 
Date: Sat, 15 Dec 2012 01:39:15 +0200
Subject: [PATCH 27/52] Demos: Redirect: Do not wrap redirect button in a
 paragraph

---
 docs/demos/redirect/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/demos/redirect/index.html b/docs/demos/redirect/index.html
index fd44df0fff9..16acae24d12 100644
--- a/docs/demos/redirect/index.html
+++ b/docs/demos/redirect/index.html
@@ -40,7 +40,7 @@ 
          Redirect: Source Page
          
 		
          
             
 			
 
 		
          

From d661f627edb1351e937b97d7d48ad5661fc7981e Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof 
Date: Sat, 15 Dec 2012 00:46:01 +0200
Subject: [PATCH 28/52] Demos: View source: Generate source views only when the
 "View Source" button is pressed, rather than at page load.

---
 docs/demos/_assets/js/jqm-demos.js | 118 +++++++++++++----------------
 1 file changed, 53 insertions(+), 65 deletions(-)

diff --git a/docs/demos/_assets/js/jqm-demos.js b/docs/demos/_assets/js/jqm-demos.js
index db47b65acdb..54d7ea76a34 100644
--- a/docs/demos/_assets/js/jqm-demos.js
+++ b/docs/demos/_assets/js/jqm-demos.js
@@ -65,6 +65,29 @@ if ( location.protocol.substr(0,4)  === 'file' ||
 }
 
 // View demo source code
+
+function attachPopupHandler( popup, sources ) {
+	popup.one( "popupbeforeposition", function() {
+		var
+			collapsibleSet = popup.find( "[data-role='collapsible-set']" ),
+			collapsible, pre;
+
+		$.each( sources, function( idx, options ) {
+			collapsible = $( "
          " +
+					"
          " + options.title + "
          " +
+					"
          " +
+				"
          " );
+			pre = collapsible.find( "pre" );
+			pre.append( options.data.replace( /" +
 					"
          " +
 				"
          " ),
-			collapsibleSet = popup.find( "[data-role='collapsible-set']" ),
-			page = $( this ).closest( "[data-role='page']" ),
-			html, js, css, collapsiblePHP, collapsibleHTML, collapsibleJS, collapsibleCSS;
-
-		function appendSource( code, collapsible ){
-			var escaped = code.replace( /
          " ).append( element.clone() ).html();
-
-			collapsibleHTML = $( "
          " +
-					"
          HTML
          " +
-					"
          " +
-				"
          " );
-
-			appendSource( html, collapsibleHTML );
+			sources.push( { title: "HTML", theme: "b", brush: "xml", data: data } );
 		}
-		if ( $( this ).is( "[data-demo-php]" ) ) {
-			collapsiblePHP = $( "
          " +
-					"
          PHP
          " +
-					"
          Loading PHP source ...
          " +
-					"
          " +
-				"
          " );
 
-			var phpSource = $( this ).attr( "data-demo-php" );
-			$.ajax( phpSource, { async: false } )
-				.success( function( data ) {
-					data = data.replace( /
          " ).append( $( "head" ).find( "script" + scriptId ).contents().clone() ).html();
-
-			collapsibleJS = $( "
          " +
-					"
          JS
          " +
-					"
          " +
-				"
          " );
-
-			appendSource( js, collapsibleJS );
+			data = $( "
          " ).append( $( "head" ).find( "script" + scriptId ).contents().clone() ).html();
+			sources.push( { title: "JS", theme: "f", brush: "js", data: data } );
 		}
-		if ( $( this ).is( "[data-demo-css]" ) ) {
-			var styleId = $( this ).attr( "data-demo-css" );
+
+		if ( self.is( "[data-demo-css]" ) ) {
+			var styleId = self.attr( "data-demo-css" );
 
 			if ( styleId === "true" ) {
 				styleId = "";
 			}
 
-			css = $( "
          " ).append( $( "head" ).find( "style" + styleId ).contents().clone() ).html();
-
-			collapsibleCSS = $( "
          " +
-					"
          CSS
          " +
-					"
          " +
-				"
          " );
-
-			appendSource( css, collapsibleCSS );
+			data = $( "
          " ).append( $( "head" ).find( "style" + styleId ).contents().clone() ).html();
+			sources.push( { title: "CSS", theme: "e", brush: "css", data: data } );
 		}
 
-		collapsibleSet.find( "[data-role='collapsible']" ).first().attr( "data-collapsed", "false" );
+		attachPopupHandler( popup, sources );
 		button.insertAfter( this );
 		popup.appendTo( page );
 
@@ -170,10 +159,9 @@ $( document ).on( "pagebeforecreate", "[data-role='page']", function() {
 	$( this ).find( "[data-demo-html='true'], [data-demo-js], [data-demo-css], [data-demo-php]" ).viewSourceCode();
 	SyntaxHighlighter.defaults['toolbar'] = false;
 	SyntaxHighlighter.defaults['auto-links'] = false;
-	SyntaxHighlighter.highlight();
 });
 
-$( document ).on( "pageinit", function() {
+$( document ).on( "pageinit", function( e ) {
 	// prevent page scroll while scrolling source code
 	$( ".jqm-demo .ui-collapsible-content" ).on( "mousewheel", function( e, d ) {
 		if ( d > 0 && $( this ).scrollTop() == 0 ) {
@@ -184,7 +172,7 @@ $( document ).on( "pageinit", function() {
 	});
 
 	// reposition when switching between html / js / css
-	$( ".jqm-demo .ui-collapsible" ).on( "expand", function() {
+	$( e.target ).delegate( ".jqm-demo .ui-collapsible", "expand", function() {
 		$( this ).parents( ".jqm-demo" ).trigger( "resize" );
 	});
 

From ba2ed4b8992b5a4547aad38804d9b8cfcec27716 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof 
Date: Sat, 15 Dec 2012 02:27:34 +0200
Subject: [PATCH 29/52] Demos: Reduce code duplication in view source

---
 docs/demos/_assets/js/jqm-demos.js | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/docs/demos/_assets/js/jqm-demos.js b/docs/demos/_assets/js/jqm-demos.js
index 54d7ea76a34..404c3dc0706 100644
--- a/docs/demos/_assets/js/jqm-demos.js
+++ b/docs/demos/_assets/js/jqm-demos.js
@@ -90,6 +90,13 @@ function attachPopupHandler( popup, sources ) {
 
 var demoId = 0;
 
+function getHeadSnippet( type, selector ) {
+	if ( selector === "true" ) {
+		selector = "";
+	}
+	return $( "
          " ).append( $( "head" ).find( type + selector ).contents().clone() ).html();
+}
+
 $.fn.viewSourceCode = function() {
 
 	return $( this ).each( function() {
@@ -127,24 +134,12 @@ $.fn.viewSourceCode = function() {
 		}
 
 		if ( self.is( "[data-demo-js]" ) ) {
-			var scriptId = self.attr( "data-demo-js" );
-
-			if ( scriptId === "true" ) {
-				scriptId = "";
-			}
-
-			data = $( "
          " ).append( $( "head" ).find( "script" + scriptId ).contents().clone() ).html();
+			data = getHeadSnippet( "script", self.attr( "data-demo-js" ) );
 			sources.push( { title: "JS", theme: "f", brush: "js", data: data } );
 		}
 
 		if ( self.is( "[data-demo-css]" ) ) {
-			var styleId = self.attr( "data-demo-css" );
-
-			if ( styleId === "true" ) {
-				styleId = "";
-			}
-
-			data = $( "
          " ).append( $( "head" ).find( "style" + styleId ).contents().clone() ).html();
+			data = getHeadSnippet( "style", self.attr( "data-demo-css" ) );
 			sources.push( { title: "CSS", theme: "e", brush: "css", data: data } );
 		}
 

From eeb4830a9bd98c6a17158387a0c4c6138c95c819 Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sat, 15 Dec 2012 08:12:52 +0100
Subject: [PATCH 30/52] Demos: Fixed undeclared variable.

---
 docs/demos/_assets/js/jqm-demos.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/demos/_assets/js/jqm-demos.js b/docs/demos/_assets/js/jqm-demos.js
index 404c3dc0706..978c01e15be 100644
--- a/docs/demos/_assets/js/jqm-demos.js
+++ b/docs/demos/_assets/js/jqm-demos.js
@@ -116,7 +116,7 @@ $.fn.viewSourceCode = function() {
 			if ( self.attr( "data-demo-html" ) === "true" ) {
 				data = self.html();
 			} else {
-				data = $( markupId ).html();
+				data = $( self.attr( "data-demo-html" ) ).html();
 			}
 			sources.push( { title: "HTML", theme: "b", brush: "xml", data: data } );
 		}

From 619dc51d1fbd43161f31b38f23dbbf3da9633551 Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sat, 15 Dec 2012 08:14:18 +0100
Subject: [PATCH 31/52] Demos: Remove custom active state on "cancel".

---
 docs/demos/swipe/swipe-list.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/demos/swipe/swipe-list.html b/docs/demos/swipe/swipe-list.html
index 60a8a298c81..125d5373b59 100644
--- a/docs/demos/swipe/swipe-list.html
+++ b/docs/demos/swipe/swipe-list.html
@@ -74,7 +74,7 @@
 				});
 				// Remove active state and unbind when the cancel button is clicked
 				$( "#confirm #cancel" ).on( "click", function() {
-					listitem.removeClass( $.mobile.activeBtnClass );
+					listitem.removeClass( "ui-btn-down-d" );
 					$( "#confirm #yes" ).off();	
 				});
 			}

From 983cfc617231fa286e27a3e1890d2da4ef2ff55b Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sat, 15 Dec 2012 10:13:45 +0100
Subject: [PATCH 32/52] Demos: swipe page demo - moved markup source view to
 intro page, changed popup ID's.

---
 docs/demos/_assets/css/jqm-demos.css | 14 --------------
 docs/demos/swipe/ba.html             |  5 ++---
 docs/demos/swipe/ct.html             |  5 ++---
 docs/demos/swipe/ny.html             |  5 ++---
 docs/demos/swipe/pa.html             |  5 ++---
 docs/demos/swipe/sl.html             |  5 ++---
 docs/demos/swipe/swipe-page.html     | 29 +++++++++++++++++++++++++++-
 docs/demos/swipe/sy.html             |  5 ++---
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/docs/demos/_assets/css/jqm-demos.css b/docs/demos/_assets/css/jqm-demos.css
index dca12fd59e7..dcf05630f2a 100644
--- a/docs/demos/_assets/css/jqm-demos.css
+++ b/docs/demos/_assets/css/jqm-demos.css
@@ -108,20 +108,6 @@ div.jqm-demo-link {
 .jqm-demo-link .ui-btn.ui-mini {
 	margin: 0;
 }
-.ui-header div.jqm-demo-link,
-.ui-footer div.jqm-demo-link {
-	border: none;
-	margin: 0;
-	padding: 0;
-	position: absolute;
-	right: 5px;
-	top: 6px;
-}
-.ui-header div[data-demo-html],
-.ui-footer div[data-demo-html] {
-	border: none;
-	padding: 0;
-}
 
 /* Swatch F - bar & buttons */
 .ui-bar-f {
diff --git a/docs/demos/swipe/ba.html b/docs/demos/swipe/ba.html
index f877a941447..735962073ab 100644
--- a/docs/demos/swipe/ba.html
+++ b/docs/demos/swipe/ba.html
@@ -103,12 +103,11 @@
 	
          
 		
          Buenos Aires
          
         Back
-		
          
     
          
 	
 	
          
     
-		
          
+		
          
         	Close
 			
          At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the Río de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. source: inautonews.com
          
         
          
@@ -121,7 +120,7 @@ 
          Buenos Aires
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
          
diff --git a/docs/demos/swipe/ct.html b/docs/demos/swipe/ct.html
index d8179f0f5ac..1030311a70d 100644
--- a/docs/demos/swipe/ct.html
+++ b/docs/demos/swipe/ct.html
@@ -103,12 +103,11 @@
 	
          
 		
          Cape Town
          
         Back
-		
          
     
          
 	
 	
          
 		
-		
          
+		
          
         	Close
         	
           Although it’s the youngest official language in the world, Afrikaans is most widely spoken and is home language for 40% of the Cape's population. The remainder of the population speaks either Xhosa or English as a home language. source: gotravel24.com
          
         
          
@@ -121,7 +120,7 @@ 
          Cape Town
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
          
diff --git a/docs/demos/swipe/ny.html b/docs/demos/swipe/ny.html
index b642a09ee5e..e48586b55be 100644
--- a/docs/demos/swipe/ny.html
+++ b/docs/demos/swipe/ny.html
@@ -103,12 +103,11 @@
     
          
         
          New York
          
         Back
-		
          
     
          
   
 	
          
     
-		
          
+		
          
         	Close
 			
          Although many legends exist about the origin of New York City's nickname, the Big Apple, most historians agree that it can be traced back to a writer who covered horse racing in the 1920s. In The Morning Telegraph, he wrote that stable hands often referred to New York as the Big Apple, meaning that any thoroughbred that raced in New York had reached the pinnacle of racing. source: nylady.hubpages.com
          
         
          
@@ -121,7 +120,7 @@ 
          New York
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
          
diff --git a/docs/demos/swipe/pa.html b/docs/demos/swipe/pa.html
index d54b3ffb983..8488aa14e38 100644
--- a/docs/demos/swipe/pa.html
+++ b/docs/demos/swipe/pa.html
@@ -103,12 +103,11 @@
 	
          
 		
          Paris
          
         Back
-		
          
     
          
 	
 	
          
 		
-		
          
+		
          
         	Close
 			
          Each year, 44 million tourists visit Paris and the surrounding Ile de France region. Paris is year after year the most visited city in the world. source: parisdigest.com
          
         
          
@@ -121,7 +120,7 @@ 
          Paris
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
          
diff --git a/docs/demos/swipe/sl.html b/docs/demos/swipe/sl.html
index 5d653eec052..368b1a21ad0 100644
--- a/docs/demos/swipe/sl.html
+++ b/docs/demos/swipe/sl.html
@@ -103,12 +103,11 @@
 	
          
 		
          Seoul
          
         Back
-		
          
     
          
 	
 	
          
 
-		
          
+		
          
         	Close
         	
          Seoul, officially the Seoul Special City, is the capital and largest city of South Korea. With a population of over 10 million, it is one of the world's largest cities. The Seoul National Capital Area, which includes the Incheon metropolis and most of Gyeonggi province, has 24.5 million inhabitants. source: bezbrige.com
          
         
          
@@ -121,7 +120,7 @@ 
          Seoul
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
           
diff --git a/docs/demos/swipe/swipe-page.html b/docs/demos/swipe/swipe-page.html
index ed337abe950..8782f201ccc 100644
--- a/docs/demos/swipe/swipe-page.html
+++ b/docs/demos/swipe/swipe-page.html
@@ -111,7 +111,7 @@ 
          Swipe page demo
          
         
         	
          Swipe to navigate
          
         
-            
          
+            
          
             	
          This demo shows how you can use the swipe event to navigate between pages. We using single HTML files for each page. Here you can see the JavaScript and CSS source. On each of the demo pages you can see the page markup as well.
          
                 
                 
          Open swipe page demo
          
@@ -123,5 +123,32 @@ 
          Swipe to navigate
          
 
 
          
 
+
          
+
+	
          
+		
          City
          
+        Back
+    
          
+	
+	
          
+    
+		
          
+        	Close
+			
          Here some text.
          
+        
          
+
+	
          
+    
+    
          
+		
          
+        	
+        	
+        
          
+        
+		Trivia
+    
          
+
+
          
+
 
 
diff --git a/docs/demos/swipe/sy.html b/docs/demos/swipe/sy.html
index 3b3926a4f5c..c035b7db288 100644
--- a/docs/demos/swipe/sy.html
+++ b/docs/demos/swipe/sy.html
@@ -103,12 +103,11 @@
 	
          
 		
          Sydney
          
         Back
-		
          
     
          
 	
 	
          
 
-		
          
+		
          
         	Close
         	
          The Sydney Opera House provides 45,000 square metres (11 acres) of usable office space out of 18,000 square metres (4.5 acres) of land. It is 183 metres (600 feet) tall and about 120 metres (388 feet) wide at its widest point. It is supported on 580 concrete piers sunk up to 25 metres below sea level. It has about 1000 rooms. It has five theatres, five rehearsal studios, two main halls, four restaurants, six bars and numerous souvenir shops. source: sheppardsoftware.com
          
         
          
@@ -121,7 +120,7 @@ 
          Sydney
          
         	
         
          
         
-		Trivia
+		Trivia
     
          
 
 
          

From c5f411c4ff6cb27f4a2c723d6ea6ac710a4110e7 Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sat, 15 Dec 2012 10:48:06 +0100
Subject: [PATCH 33/52] Demos: Added and adjusted comments in swipe page demo

---
 docs/demos/swipe/ba.html         | 15 +++++++++------
 docs/demos/swipe/ct.html         | 15 +++++++++------
 docs/demos/swipe/ny.html         | 15 +++++++++------
 docs/demos/swipe/pa.html         | 15 +++++++++------
 docs/demos/swipe/sl.html         | 15 +++++++++------
 docs/demos/swipe/swipe-page.html | 15 +++++++++------
 docs/demos/swipe/sy.html         | 15 +++++++++------
 7 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/docs/demos/swipe/ba.html b/docs/demos/swipe/ba.html
index 735962073ab..2017e14b53c 100644
--- a/docs/demos/swipe/ba.html
+++ b/docs/demos/swipe/ba.html
@@ -19,12 +19,14 @@
 	
 	
 
 
 
          
@@ -52,9 +57,12 @@ 
          Listview Autocomplete
          
 	
          
 
 		
          
+        
+        	
          Cities worldwide
          
 
-			
          
-				
            
+			
            
+            	
            After you entered at least three characters the autocomplete function will show all possible matches.
             
+				
              
 			
              
 
 

From 9cafeb1802c1c3020e4025f29aff4b3cd47a196e Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sun, 16 Dec 2012 13:32:00 +0100
Subject: [PATCH 50/52] Demos: fixed the prevent page scrolling when scrolling
 source view.

---
 docs/demos/_assets/js/jqm-demos.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/demos/_assets/js/jqm-demos.js b/docs/demos/_assets/js/jqm-demos.js
index 1697cfbc963..44f2c5a67f1 100644
--- a/docs/demos/_assets/js/jqm-demos.js
+++ b/docs/demos/_assets/js/jqm-demos.js
@@ -158,14 +158,14 @@ $( document ).on( "pagebeforecreate", "[data-role='page']", function() {
 
 $( document ).on( "pageinit", function( e ) {
 	// prevent page scroll while scrolling source code
-	$( ".jqm-demo .ui-collapsible-content" ).on( "mousewheel", function( e, d ) {
-		if ( d > 0 && $( this ).scrollTop() == 0 ) {
-			e.preventDefault();
-		} else if ( d < 0 &&  $( this ).scrollTop() == $( this ).get(0).scrollHeight - $( this ).innerHeight() ) {
-			e.preventDefault();
+	$( document ).on( "mousewheel", ".jqm-demo .ui-collapsible-content", function( event, delta ) {
+		if ( delta > 0 && $( this ).scrollTop() === 0 ) {
+			event.preventDefault();
+		} else if ( delta < 0 &&  $( this ).scrollTop() === $( this ).get( 0 ).scrollHeight - $( this ).innerHeight() ) {
+			event.preventDefault();
 		}
 	});
-
+	
 	// reposition when switching between html / js / css
 	$( e.target ).delegate( ".jqm-demo .ui-collapsible", "expand", function() {
 		$( this ).parents( ".jqm-demo" ).trigger( "resize" );

From 41cc858067e4efb360d106c1c5c6f6bbf5d489d7 Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sun, 16 Dec 2012 14:11:06 +0100
Subject: [PATCH 51/52] Demos: fixed mistake in code to trigger "updatelayout.

---
 docs/demos/listviews/listview-filter-autocomplete.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/demos/listviews/listview-filter-autocomplete.html b/docs/demos/listviews/listview-filter-autocomplete.html
index bd81c1bb613..bab523d1923 100644
--- a/docs/demos/listviews/listview-filter-autocomplete.html
+++ b/docs/demos/listviews/listview-filter-autocomplete.html
@@ -34,7 +34,7 @@
 						});
 						$ul.html( html );
 						$ul.listview( "refresh" );
-						$ul.listview.trigger( "updatelayout");
+						$ul.trigger( "updatelayout");
 					});
 				}
 			});

From 0e140f9cfbfd909b3e367b63be97440002943e00 Mon Sep 17 00:00:00 2001
From: Jasper de Groot 
Date: Sun, 16 Dec 2012 21:35:42 +0100
Subject: [PATCH 52/52] Dialog: Append close button to first found header to
 prevent a close button being added to popup on same page as well. Fixes
 #5382.

---
 js/widgets/dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/widgets/dialog.js b/js/widgets/dialog.js
index ad123fc9ff1..ac55ded60e8 100644
--- a/js/widgets/dialog.js
+++ b/js/widgets/dialog.js
@@ -86,7 +86,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
 			// Sanitize value
 			location = ( value === "left" ? "left" : "right" );
 			btn = $( ""+ this.options.closeBtnText + "" );
-			this.element.children().find( ":jqmData(role='header')" ).prepend( btn );
+			this.element.children().find( ":jqmData(role='header')" ).first().prepend( btn );
 			if ( this._createComplete && $.fn.buttonMarkup ) {
 				btn.buttonMarkup();
 			}