jQuery Mobile: Fixed Floating Footer with iScroll
In this tutorial we will be showing you how to fix the bug in jQuery mobile with fixing your footer to the bottom of the page in the floating position. It is a common problem with a lot of dud solutions out there so I will sharing with you the best fix I have managed to find after many hours of research.
Often if you do manage to get the footer to float in the right position with jQuery mobile the button stop working the moment you start scrolling. This solution gets the footer to remain fixed to the bottom of the mobile screen while keeping the button functioning fully.
Getting jQuery Mobile and iScroll Set-up
Naturally the first thing we need to do is get all our jQuery assets into place so that we can get working.
So first step is to start a new project like we normally would. Start a fresh jQuery site in whatever method you would normally set it up. For me this is simply starting a new jQuery mobile project in Dreamweaver CS6. Make sure your jQuery mobile .js files are the latest by going to http://jquerymobile.com/download/
Next we need to make sure we have the latest version of iScroll as well. We need to get the iScroll.js from :http://cubiq.org/iscroll-4
Place this file in the same folder as your jQuery mobile files.
If you have these files in your jQuery mobile folder of your phone we are now ready to to begin the next step.
The HTML side of jQuery Mobile and iScroll
This is like I said before the easiest system I have encounter so far for getting iScroll and jQuery mobile to work together (not to mention the only one that works).
Create a new HTML file and call it index.html. In the head of this file we need to call all the above files we need to make jQuery Mobile and iScroll work together.
Now we have done this we have done everything we need to do in our header. We con now begin work on the body of our file. For this I will only be adding one page.
So inside the body tags we need to set up our page like this:
<div data-role="page" id="page"> <div data-role="header" data-position="fixed"> <h3>First Aid</h3> </div> <div data-role="content"> <p> stick your contents in here preferably lots of it.</p> </div>
<div data-role="footer" data-position="fixed">
<h3>your footer contents here</h3>
As you can see this pretty standard. But now we need to get this page ready to accept the iScroll widget within it. So any pages inside this document that need to use the iScroll ability we need to change the page declaration line. We need to change it from:
<div data-role="page" id="page">
<div data-role="page" id="page" data-iscroll="enable">
This page is now ready to accept the iScroll div inside the content area. So inside this section:
<div data-role="content"> <p> stick your contents in here preferably lots of it.</p> </div>
We need to stick a div that is data-iscroll enabled around our content. Like this:
<div data-role="content"> <div data-iscroll="scroller"> <p> stick your contents in here preferably lots of it.</p> </div> </div>
Naturally to test it properly yourself you will need to put a lot more content in this section so that the page will scroll but I will leave that up to you.
From here on in all you have to do to each page that requires the scroller is follow the last two steps. Enable the page for iscroll events and add the data-iscroll=”scroller” div around our content. This will even work if you have many pages in the same html document as most jQuery mobile apps do.
Hope you found this helpful and see you again soon.