Question

This is what I currently have going on: https://i.stack.imgur.com/GjiAt.png

Basically, it’s a list that uses jQuery and some AJAX to hit a webservice which hits a database and pulls the respective dogs based on the users selections in the previous menu.

This is for a mobile app, and I’d like the ability to scroll the list up/down while keeping the header/footer stuck in their respective positions.

Here is the relevant code:

list :

<div ID="dogs" style="text-align:center;width:100%;overflow:auto ">

footer :

<div data-role="footer" id="footer" class="footer" style="background: url('images/footer.png');width:100%;height:87px;">
footer {position: absolute; bottom: 0; z-index: 1;}

Now, in doing research I found that before using the touchOverflow, I have to add this:

<script> $(document).bind("mobileinit", function(){ $.mobile.touchOverflowEnabled = true; }); </script>

Which I have, and have had no luck. So it seems to me that I either need to do some CSS magic, or jQuery has something else up its’ sleeve for me. Either way, I’d love your help !

Thanks!

Answer 1

Try position: fixed on your footer.