Question

I am building a PhoneGap/Cordova app and have a simple code that uses http://ricostacruz.com/jquery.transit/
to display a div when another div is clicked.

<style>
#hiddendiv {
    top: -2000px;
    position:absolute;
}
</style>

<script>
$('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').transition({ y: '2100px' });
            });
</script>

<!--HTML-->
<div id="hiddendiv">
Lorem Ipsum blah blah blah Loooong piece of text
</div>

<div id="clickme">
Click Me
</div>

And it works fine. The issue is that I cannot scroll on my device once the #hiddendiv is displayed.

I this is partly because the page is only about 500px height (not actually set anywhere) whilst the #hiddendiv is about 1500px height

Does anyone know of a work around for this?

Answer 1

If your working in IOS or Android why not use Webkit transitions in css. If you set the height of body tag to 100%?

<style>
body {
height: 100%
}

#hiddendiv {
-webkit-transform: translate(0, -2000px);
-webkit-transition: all ease-in 3s;
}
</style>

<script>
   $('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').css('-webkit-transform','translate(0, 2100px)');
            });
   </script>

Also it will be natively faster (at least on iOS) because its using webkit rather then jquery animate.