Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

Question

I\'m diving into writing a mobile app with jQuery Mobile/PhoneGap. I\'m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have al

Answer 1

I've been trying to tackle this problem for a few days now and I've gotten really close to the solution. I use the following HTML:

    


        

            
Title
        


        
  
            
Loading...
        


        

            

            
        

    

And I've created the following functions to load the menu/content using ajax:

$(document).on('pageinit', "#page", function() {
    // for example: displayFooter();
    loadContent("main");
    loadMenu("default");
});

function loadContent(location) {
    return $('#content').load("views/content/"+location+".html", function() { 
        $(this).trigger('create');
    });
}
function loadMenu(location) {
    $("#menu").remove();
    $("#navbar").remove();

    $("#footer").html('
');
    $("#navbar").html('
');

    $("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); });

    return true;
}

The .trigger('create'); and .navbar(); are the methods required to keep the JQM styling correct, however, there's still one little bug. The position of the menu (which is set using css top: ...px) is sometimes not correct and moves itself to the correct position after the first tap. Really close though!

Edit: By setting #footer to position: fixed; the minor bug I mentioned above is gone. Also, it's easy to make a method that calculates the top (in px) for the #footer if the position caused by the top value by JQM is incorrect.