The web design and pages for my personal website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Things-Learned-with-jQuery-Mobile.md 2.4 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. # Things Learned with jQuery Mobile
  2. ## No global top/bottom headers
  3. Each individual page needs the markup for their own header/footer bars. I ended up using Perl Template::Toolkit to build the index.html from a template so I could reuse these components without copying/pasting them all over the place!
  4. ## Can't mix it with FontAwesome
  5. Just doesn't work.
  6. ## Difficult to mix it with Knockout
  7. This sort of thing doesn't work:
  8. ```html
  9. <div data-role="navbar">
  10. <ul>
  11. <!-- ko if: logged_in() && my_username() == this_username() -->
  12. <li>Edit Profile</li>
  13. <!-- /ko -->
  14. <li>Other stuff</li>
  15. </ul>
  16. </div>
  17. ```
  18. jQuery Mobile does all the styling and rendering in JS, and if Knockout is hiding DOM elements at this phase, then jQuery Mobile can't style them and they'll look default and stupid.
  19. ## Transition performance sucks
  20. Even when you set transitions to `none`, you get a white screen flicker between loading pages on Android 4.3
  21. Most reliable fix as of late is to do this in two parts:
  22. First, disable all transitions in the JS for Android only.
  23. ```javascript
  24. $(document).bind("mobileinit", function() {
  25. if (navigator.userAgent.match(/Android/i)) {
  26. $.extend($.mobile, {
  27. defaultPageTransition: "none"
  28. });
  29. }
  30. });
  31. ```
  32. Secondly, disable hardware acceleration, because the screen will still flash white between pages even with `none` set as the transition. Unfortunately you can't just use `phonegap run android` because it will always set `hardwareAccelerated=true` in the manifest file (even if you manually change it *and* mark the file immutable in Linux). Instead navigate to the Android platform and build it manually.
  33. ```bash
  34. cd platforms/android
  35. ant debug
  36. # copy bin/Siikir-debug.apk to your phone or whatever
  37. ```
  38. The PhoneGap Build service probably won't be able to do this for you, so for Android you'll always need to build locally.
  39. Allegedly iOS has better hardware acceleration and shouldn't need you to disable transitions or acceleration, and PhoneGap Build should be able to be used. To be investigated.
  40. **Better Solution**
  41. http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
  42. Change from this:
  43. ```html
  44. <meta name="viewport" content="width=device-width, initial-scale=1">
  45. ```
  46. To:
  47. ```html
  48. <meta name="viewport" content="width=device-width, user-scalable=no" />
  49. ```
  50. Then HW accel can be used in Android and the flickering is gone too!