jQuery Dynamic Background-Postion for iPhone

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?

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)

<script type="text/javascript">
jQuery(document).ready(function(){  

    var deviceAgent = navigator.userAgent.toLowerCase();  
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);            
        if (agentID) {
        {
            // do stuff
        }
        else
        {
            // do nothing
        }
    }
</script>

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.

var viewportHeight = $(window).height();

I found this snippet of code that utilizes the "parralax" effect - where scrolling your position affects the background-position.

        $(function(){
            var yAdd = 0;
            var scrollInterval = setInterval(function(){
                yAdd++;
                if(yAdd >= 920){
                    xAdd = 0;
                }
                $('#body').css('background-position',xAdd + 'px 100%');
            },10);
        });        }

Can someone help me stitch all of this together... PLEASE?!

I'm thinking it should look something like this:

<script type="text/javascript">
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 >= 920){
                    yAdd = 0;
                }
                $('#body').css('background-position',yAdd + 'px 100%');
            },10);
 开发者_如何学Go       });        }
        }
        else
        {
            ''
        }
    }
</script>

---

This might not be exactly what your looking for but you can detect iphone and ipad and ipod devices through CSS like this

<link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />

But I kno you need it through jQuery here is what you might do instead

jQuery(document).ready(function(){  
    var deviceAgent = navigator.userAgent.toLowerCase();  
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);  
       if (agentID) {
          // do something
       } else {
          //do this
       }
});

the only problem is this code is not specific to iPhone, iPad, iPod and so on

as far as the background-image Fixed doesn't work I know you know that makes sense why it doesn't but it sucks and I have not explored a solution for this

---

I don't have an official answer for this yet, but I'm CLOSE... Read Over here

https://stackoverflow.com/questions/4719469/patching-this-code-to-apply-dynamic-iphone-background-position

I've found a way to dynamically set the "top: x" property based on scroll position (at least it works on my iPhone)... but I still need help putting it all together!