Home/ Questions/Q 8182415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:51:20+00:00

I’m not asking how to get a fixed footer. I’ve a structure with both

  • 0

I’m not asking how to get a fixed footer.

I’ve a structure with both multi-page and single page.
I’d like to know how to use only one html fragment for the whole site. I’m really looking for a solution because I’d like to edit the footer in only one place and see the modification in all pages.

Thanks.

EDIT:
I’m developing a mobile application to be wrapped with PhoneGap, so I’m looking for client side solutions.

SOLUTION (pushing together the solutions by @maco and adapting them to my case):

$(function() {
// load the templates
$('body').append('<div id="module"></div>');
$('#module').load('templates/module.html :jqmData(role="page")',function() {

    // save the actual footer and header
    var hdhtml = $('#module :jqmData(role="header")').clone();
    var fthtml = $('#module :jqmData(role="footer")').clone();

    // removes the header/footer
    $(':jqmData(role="header")').remove();
    $(':jqmData(role="footer")').remove();

    // load at the correct place the header/footer
    $(':jqmData(role="page")').prepend(hdhtml).append(fthtml).page().trigger('pagecreate');

    // delete the temporary div
    $($(this).html()).replaceAll(this).attr('id', 'module');
});

// set the class "ui-btn-active" for the active page
$(document).live('pagecreate', function() {
    // get the current page
    var currentPage = window.location.pathname;
    currentPage = currentPage.substring(currentPage.lastIndexOf("/") + 1, currentPage.length).split("&")[0];

    // remove the class from the footer
    $($.mobile.activePage + ':jqmData(role="footer") li a')
            .removeClass('ui-btn-active ui-state-persist');

    // add the class to the link that points to the particular href
     $($.mobile.activePage + ':jqmData(role="footer") li a[href="' + currentPage + '"]').addClass('ui-btn-active ui-state-persist');

});
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    module.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>module header</h1>
            </div>
            <div data-role="footer" class="ui-bar">
                <h3>module footer</h3>
            </div>
        </div>
    </body>
</html>

    module.js (load this in all pages)

    function module() {
    var fthtml = $('#module :jqmData(role="footer")').clone();
    $(':jqmData(role="footer")').remove();
    $(':jqmData(role="page")').append(fthtml).page().trigger('pagecreate');
}

$(function(){
    $('body').append('<div id="module"></div>');
    $('#module').load('YOUR_module.html_PATH :jqmData(role="page")',function(){
        $($(this).html()).replaceAll(this).attr('id','module');
        module();
    });
    $(':jqmData(role="page")').live('pageinit',module);
});

    YOUR_module.html_PATH (eg. “../module.html”, “../module/module.html”)

    • 0