title: jQuery Dynamic Background-Postion for iPhone
body: <p>Forgive me, I am a total n00b with javascript!  I have a complicated request that I've been trying to put together for hours I think I have the pieces, but I have a poor understanding of javascript and jQuery syntax, can someone help me put this together?</p>
  
  <p>First, this code should detect via UserAgent string if the device is an iPhone (Note: I'm not sure if this works for all mobile devices... any suggestions for better conditional statements that will catch ALL iPads, iPhones, etc. - anything that uses viewport rather than scrollbars)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){  
  
      var deviceAgent = navigator.userAgent.toLowerCase();  
      var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);            
          if (agentID) {
          {
              // do stuff
          }
          else
          {
              // do nothing
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Next piece of the puzzle is detecting the height of the viewport.  It's important that this script be conditional and apply only to devices that utilize viewport and NOT scrollbars, otherwise I screw the site up for non-mobile users.  I only need to alter background-position on the y axis, trying to prevent the background image from disappearing when mobile users slide the viewport.</p>
  
  <pre><code>var viewportHeight = $(window).height();
  </code></pre>
  
  <p>I found this snippet of code that utilizes the "parralax" effect - where scrolling your position affects the background-position.</p>
  
  <pre><code>        $(function(){
              var yAdd = 0;
              var scrollInterval = setInterval(function(){
                  yAdd++;
                  if(yAdd &gt;= 920){
                      xAdd = 0;
                  }
                  $('#body').css('background-position',xAdd + 'px 100%');
              },10);
          });        }
  </code></pre>
  
  <p><strong>Can someone help me stitch all of this together... PLEASE?!</strong></p>
  
  <p>I'm thinking it should look something like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){  
  
      var deviceAgent = navigator.userAgent.toLowerCase();  
      var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);            
          if (agentID) {
  
          $(function(){
              var viewportHeight = $(window).height();
              var yAdd = 0;
              var scrollInterval = setInterval(function(){
                  yAdd++;
                  if(yAdd &gt;= 920){
                      yAdd = 0;
                  }
                  $('#body').css('background-position',yAdd + 'px 100%');
              },10);
          });        }
          }
          else
          {
              ''
          }
      }
  &lt;/script&gt;
  </code></pre>