update parallax.js to version 1.2, add documentation for androidFix, and genericise the mobile user agent message

mikegreiling · mikegreiling · commit 253739cf04c9 · 2014-11-16T04:58:10.000-06:00
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
     <script src="./js/bootstrap.min.js"></script>
     <script>
       $(function(){
-        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
+        if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
           $('#ios-notice').removeClass('hidden');
           $('.parallax-container').height( $(window).height() * 0.5 | 0 );
         } else {
@@ -32,10 +32,10 @@
   <body>
     <section>
       <div class="container">
-        <div id="ios-notice" class="alert alert-info hidden"><p><strong>Notice:</strong> Hello iOS user. Unfortunately, this parallax effect cannot be achieved on iOS devices, so all you will see on this demo page are static backgrounds.  Please visit this page on a desktop browser to see its full effect.</p></div>
+        <div id="ios-notice" class="alert alert-info hidden"><p><strong>Notice:</strong> Hello mobile user. Unfortunately, this parallax effect is not reliably achieved on mobile devices, so all you will see on this demo page are static backgrounds.  Please visit this page on a desktop browser to see its full effect.</p></div>
         <h1>Simple Parallax Scrolling <small>parallax.js</small></h1>
         <p>Parallax.js is a dirt simple parallax scrolling effect inspired by <a href="http://spotify.com">Spotify.com</a> and implemented as a jQuery plugin.</p>
-        <a href="https://github.com/pixelcog/parallax.js/archive/v1.1.zip" class="btn btn-default download-link">Download Parallax.js v1.1</a>
+        <a href="https://github.com/pixelcog/parallax.js/archive/v1.2.zip" class="btn btn-default download-link">Download Parallax.js v1.2</a>
         <a href="https://github.com/pixelcog/parallax.js/" class="btn btn-default">View on GitHub</a>
       </div>
     </section>
@@ -158,6 +158,12 @@ <h2 id="options">Options</h2>
                       <td>true</td>
                       <td>iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation.</td>
                   </tr>
+                  <tr>
+                      <td>androidFix</td>
+                      <td>boolean</td>
+                      <td>true</td>
+                      <td>If true, this option will set the parallax image as a static, centered background image whenever it detects an Android user agent. Disable this if you wish to enable the parallax scrolling effect on Android devices.</td>
+                  </tr>
               </tbody>
           </table>
         </div>
diff --git a/js/parallax.js b/js/parallax.js
@@ -1,5 +1,5 @@
 /*!
- * parallax.js v1.1 (http://pixelcog.github.io/parallax.js/)
+ * parallax.js v1.2 (http://pixelcog.github.io/parallax.js/)
  * Copyright (c) 2014 PixelCog, Inc.
  * Licensed under MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
  */
@@ -99,7 +99,18 @@
     if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
       if (this.iosFix && !this.$element.is('img')) {
         this.$element.css({
-          backgroundImage: 'url(' + encodeURIComponent(this.imageSrc) + ')',
+          backgroundImage: 'url(' + this.imageSrc + ')',
+          backgroundSize: 'cover',
+          backgroundPosition: this.position
+        });
+      }
+      return this;
+    }
+
+    if (navigator.userAgent.match(/(Android)/)) {
+      if (this.androidFix && !this.$element.is('img')) {
+        this.$element.css({
+          backgroundImage: 'url(' + this.imageSrc + ')',
           backgroundSize: 'cover',
           backgroundPosition: this.position
         });
@@ -148,7 +159,8 @@
     bleed:    0,
     zIndex:   -100,
     iosFix:   true,
-	position: 'center',
+    androidFix: true,
+    position: 'center',
 
     refresh: function() {
       this.boxWidth        = this.$element.width();
diff --git a/js/parallax.min.js b/js/parallax.min.js
