Response title
This is preview!
Move this topic
jQuery Mobile - Fixed Header and Footer on Page Transition.
in jQuery Mobile
•
11 years ago
Hey,
I am developing an app with multi-page template, i have same header and footer in almost all the pages.
Now when i load a new page, the entire page slides along with header and footer.
What i want is whenever a page loads only the content area div (data-role="content") of the page should change/slide, and not the header or footer div. is this possible and how.
Thanks
I am developing an app with multi-page template, i have same header and footer in almost all the pages.
Now when i load a new page, the entire page slides along with header and footer.
What i want is whenever a page loads only the content area div (data-role="content") of the page should change/slide, and not the header or footer div. is this possible and how.
Thanks
1
Replies(9)
I think this is not possible ! You have to made custom code for that purpose.
Leave a comment on wisahh's reply
more or less. You can make the footer persistent. See here: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html
To do the same for the header you would need to hack into JQM and mimic the footer behavior.
To do the same for the header you would need to hack into JQM and mimic the footer behavior.
Leave a comment on frequent's reply
thanks for the replies guys
@frequent - yup i have gone through that link, just that my page have fixed height so vertical scrolling is not an issue and with persist option its more helpful for vertical transitions than horizontal / swipes.
In my case i have a logo at top as header and navigation menu as footer, with products as content, so switching from one product to another using swipe is the functionality i am implementing, for which i need to move only product. Maybe there's some other approach i need to take...
@frequent - yup i have gone through that link, just that my page have fixed height so vertical scrolling is not an issue and with persist option its more helpful for vertical transitions than horizontal / swipes.
In my case i have a logo at top as header and navigation menu as footer, with products as content, so switching from one product to another using swipe is the functionality i am implementing, for which i need to move only product. Maybe there's some other approach i need to take...
Leave a comment on Darshan's reply
Then it will be difficult.
You are looking for a wrapper page with global header and footer. Instead of content-section you will need a pageContainer, which can hold your swiped in pages. Swiped in pages come without header/footer.
I'm working on plugin to allow for page-containers instead of content-sections (no swiping - check pagination for this). But it will be a while until it's ready. Check my multiview repo to keep up to date.
Cheers.
You are looking for a wrapper page with global header and footer. Instead of content-section you will need a pageContainer, which can hold your swiped in pages. Swiped in pages come without header/footer.
I'm working on plugin to allow for page-containers instead of content-sections (no swiping - check pagination for this). But it will be a while until it's ready. Check my multiview repo to keep up to date.
Cheers.
Leave a comment on frequent's reply
After digging a bit deeper in documentation found out a that these are know limitations as of now..
From documentation
"Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page."
From documentation
"Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page."
Leave a comment on Darshan's reply
Hi, any news here or suggestions?
I don't want to copy paste the header or footer in every page, should be dynamical, else I see no point in this.
A simple script that injects the html code for the header of footer in pages should do the trick, any one tried something similare?
Leave a comment on interactivetribe's reply
I don't want to copy paste the header or footer in every page, should be dynamical
This normally isn't much of an issue, since servers almost always have at least some kind of server-side include capability, and in many cases some templating system is available (almost always if pages are being served with PHP, Ruby, etc.)
If you're writing for a native app using PhoneGap etc. then look at using a static site generator like Jekyll/Hyde to make maintainence easier.
Leave a comment on watusiware's reply
Are you planning on PhoneGapping your project? If so, look into NativeControls.
Leave a comment on zSprawl's reply
Just a quick solution I did, do like this:
1. Wrap your data-role="header" and put the id=""constantheader-wrapper".
<header id="constantheader-wrapper">
<div data-role="header" data-id="theconstantheader" class="ui-header ui-bar-a" role="banner" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Mobile sidor</h1>
</div>
</header>
Use div if want in the header wrapper, but try to have the full rendered header output like in this case, else it will loose the styling when you reload a page. NOTE! Put the header in your first page, then this method just add the header html to all the other pages.
2. Put the function in file or inline script
jQuery.fn.headerOnAllPages = function() {
var theHeader = $('#constantheader-wrapper').html();
var allPages = $('div[data-role="page"]');
for (var i = 1; i < allPages.length; i++) {
allPages[i].innerHTML = theHeader + allPages[i].innerHTML;
}
};
3. Call the function from document ready, for example:
$(document).ready(function() {
$().headerOnAllPages();
});
NOTE! This is just a quick fix if you want pure html solution.
Leave a comment on mariachi's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Darshan's question
Statistics
- 9 Replies
- 45363 Views
- 0 Followers