Here is the quick article to share the solution I found for fixed header issue using PhoneGap and jQuery mobile in Android/iOS application.
I have used jQuery mobile for an android PhoneGap application. I have created a header which position is fixed means sticks to the top of the device’s screen.
It has data-position=”fixed” so It will display every time even you have to scroll a page. Now let’s see the problem I have faced with this.
I have one image after the header and when I tap on that image and click on the screen the headers slightly jumps up and then reset to the position.
So, I got a solution of this problem by using one attribute of jQuery mobile and to do this, I have used jQuery mobile attribute data-tap-toggle.
So, Let’s see the code:
1 2 3 4 5 | <div data-role="header" data-position="fixed" data-tap-toggle="false"> <div><a href="#" data-rel="back">back</a> <div><a href="#home" >home</a> |
Here I have added tag into a header to keep it fixed on the top of the screen. Tap toggle will keep the header even if you scroll/tap on the body.
Other posts,You may like:
Display Text Format Proper in IPHONE+ANDROID
How to call Multiple Change Page in Single HTML
SQLite statements used in Android/iOS using PhoneGap
As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (5)