Persistent toolbars

These pages are a demo of a persistent navbar in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.

With the new external toolbars no extra effort is required to now have persistent toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.

Typically, the persistent toolbar technique will be combined with fixed positioning.

Updating toolbar contents

Because the same toolbar is used on every page, you might want to update the content. In this demo we show how to change the heading in the header and set the nav button of the page currently in view to the active state.

Improving page load with persistent toolbars

By combining this technique with a little bit of server side logic you can reduce the file size for each page load significantly by not sending anything except the actual page container back when the request is from ajax. this not only reduces file size but makes the actual processing of the page quicker also. To see an example of this technique see Ajax optimized persistent toolbars

A note about transitions

By Removing the toolbars from the page container they are no longer part of the page transition which dramaticly improves the performance of complex 3D page transitions over the older style of persistent toolbars.