JQM Swipe-Page

JQM Swipe-Page

I have a JQM site that is using JQM swipe-page.js. just swipes thru 6 different pages.


the script is working as long as there is nothing on the page (no div content) 


here is the script

  1. $( document ).one( "pagecreate", ".demo-page", function() {

  3. $( "#header" ).toolbar({ theme: "b" });
  4. $( "#footer" ).toolbar({ theme: "b" });

  6. function navnext( next ) {
  7. $( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
  8. transition: "slide"
  9. });
  10. }

  12. function navprev( prev ) {
  13. $( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
  14. transition: "slide",
  15. reverse: true
  16. });
  17. }

  19. $( document ).on( "swipeleft", ".ui-page", function( event ) {

  21. var next = $( this ).jqmData( "next" );
  22. if ( next && ( event.target === $( this )[ 0 ] ) ) {
  23. navnext( next );
  24. }
  25. });

  27. $( document ).on( "click", ".next", function() {
  28. var next = $( ".ui-page-active" ).jqmData( "next" );
  29. if ( next ) {
  30. navnext( next );
  31. }
  32. });
  33. $( document ).on( "swiperight", ".ui-page", function( event ) {
  34. var prev = $( this ).jqmData( "prev" );
  35. if ( prev && ( event.target === $( this )[ 0 ] ) ) {
  36. navprev( prev );
  37. }
  38. });

  40. $( document ).on( "click", ".prev", function() {
  41. var prev = $( ".ui-page-active" ).jqmData( "prev" );

  43. if ( prev ) {
  44. navprev( prev );
  45. }
  46. });
  47. });


  49. $( document ).on( "pageshow", ".demo-page", function() {
  50. var thePage = $( this ),
  51. title = thePage.jqmData( "title" ),
  52. next = thePage.jqmData( "next" ),
  53. prev = thePage.jqmData( "prev" );


  55. $( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );


  57. $( "#header h1" ).text( title );

  59. if ( next ) {
  60. $( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
  61. }
  62. $( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );

  64. if ( ! next ) {
  65. $( ".next" ).addClass( "ui-state-disabled" );
  66. }
  67. if ( ! prev ) {
  68. $( ".prev" ).addClass( "ui-state-disabled" );
  69. }
  70. });


here is html:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>New York</title>
  8. <link rel="stylesheet" href="swipe_files/jquery.mobile-1.4.2.min.css">
  9. <link rel="stylesheet" href="swipe_files/jqm-demos.css">
  10. <link rel="stylesheet" href="swipe_files/swipe-page.css">
  12. <script src="swipe_files/jquery.js"></script>
  13. <script src="swipe_files/index.js"></script>
  14. <script src="swipe_files/jquery.mobile-1.4.2.min.js"></script>
  15. <script src="swipe_files/swipe-page.js"></script>
  17. </head>
  18. <body>

  20. <div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="true">
  21.     <h1>New York</h1>
  22.     <a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
  23. </div><!-- /header -->

  25. <div data-role="page" id="newyork" class="demo-page" data-title="New York" data-dom-cache="true" data-theme="b" data-next="buenosaires">

  27. <div role="main" class="ui-content">

  29. <div id="trivia-newyork" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
  30.         <a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all">Close</a>
  31. <p>Blah Blah Blah</small></p>
  32.         </div>

  34. </div>
  35. <!-- /content -->
  36. <div class="tournament"> 
  37.       <div class="portfolio-item-thumb one-half"> 
  38.         <div class="round quarter-finals"> 
  39.           <div class="match" > 
  40.             <div class="player">Five Finger Death Punch</div>
  41.             <div class="player winner">Player 2</div>
  42.           </div>
  43.           <div class="match"> 
  44.             <div class="player winner">Player 3</div>
  45.             <div class="player">Player 4</div>
  46.           </div>
  47.           <div class="match"> 
  48.             <div class="player">Player 5</div>
  49.             <div class="player winner">Player 6</div>
  50.           </div>
  51.           <div class="match"> 
  52.             <div class="player">Player 7</div>
  53.             <div class="player">Player 8</div>
  54.           </div>
  55.         </div>
  56.       </div>
  57.     </div>
  58. </div>

  60. <!-- /page -->

  62.     <div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
  63. <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
  64.         <a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l">Previous</a>
  65.         <a href="buenosaires.html" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r">Next</a>
  66.         </div>

  68. <a href="#trivia-newyork" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all">Trivia</a>
  69.     </div><!-- /footer -->

  71. </body>
  72. </html>

when the yellow highlighted code in the content is NOT there, everything works perfect. 

When I add the highlighted code, I cant swipe anymore. It will swipe if i can grab a little bit of the background outside of that highlighted code area. 

 Any ideas why when I add that div content in there, it covers up the swipe ability? 

just in case, here is the css as well... 
  2. .demo-page {
  3. background-size: cover;
  4. background-position: center center;
  5. background-repeat: no-repeat;

  7. }

  9. .demo-page .ui-footer {
  10. background: #000;
  11. border: none;
  12. bottom: 0;
  13. }

  15. .control.ui-btn-left,
  16. .trivia-btn.ui-btn-right {
  17. top: auto;
  18. bottom: 7px;
  19. margin: 0;
  20. }

  22. small {
  23. font-size: .75em;
  24. color: #666;
  25. }

any suggestions would be awesome! Thanks

here is the non-working page...


to best see the issue, look on mobile,(it will swipe on browser with mouse if you grab the bg area)