Home/ Questions/Q 8651967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:11:50+00:00

Does i realy have to repeat the Navbar on every page DIV? Or is

  • 0

Does i realy have to repeat the “Navbar” on every page DIV? Or is there an solution to use only one footer for all pages inside an multi-page html?

 <div data-role="page" id="page11">
        <div data-role="header"> <h1>Home</h1> </div>

        <div data-role="content"> <h3>TEST</h3>
            <p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
        </div>

        <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header"> <h1>Hilfe </h1> </div>
        <div data-role="content"> <h3>TEST </h3> </div>

         <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

Thx for any ideas!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, your navbar/footer/header must be present in all of your page-DOM-elements.
    But to avoid repeating yourself you have many options on the client and/or server side.
    I always recommend to use some kind of templating in such situations.

    On the client side you could place your navbar into a <script> tag beneath the <body> tag. Assign an unique id attribute to this script tag and add some JavaScript like this:

    Template Snippet:

    <script type="text/template" id="myFooterTemplateID">
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <div data-role="navbar">
            <ul>
                <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
            </ul>
        </div> 
    </div>
</script>

    JavaScript:

    jQuery('*[data-role="page"]').on("pagebeforecreate", function(e) {
    var page = jQuery(this);
    // please replace this part with a template engine ...
    var header = jQuery(jQuery("#myFooterTemplateID").html()); 

    // bind some events to the header's content here - if any
    // for example: 
    // header.find('.myButtonClass').bind('tap', onButtonClicked);

    // append to page
    page.append(header);
});

    Check out Handlebars.js or Underscore-Templates for production ready JS-templating instead of writing your own library.

    • 0