Jquerymobile + phonegap : tap-toggle, slider , footer issues

Question

I made a jquerymobile + phonegap application when i am running on the mobile device i am facing few issues. 1) My app has 7 pages in single html file, two buttons on footer when i click on the button it slides to next page, but i see a navigation like line appearing while sliding which is annoying. 2) and when i clicking on the button , it is changing the color to the footer theme and after few secs it is loading its original theme which is also annoying to look. 3) and my header and footer toggle all the time , i tried data-tap-toggle="false" and

$(document).bind('pageinit', function(event) {
 $("[data-role=header]").fixedtoolbar({ tapToggle: false });
 $("[data-role=footer]").fixedtoolbar({ tapToggle: false });
});

Still it is not working

Any information on this is appreciated.

Answer 1

try this one

$(document).bind("mobileinit", function() {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function(event, ui) {
        $(event.currentTarget).remove();
    });
    $("[data-role=header]").fixedtoolbar({ tapToggle: false });
    $("[data-role=footer]").fixedtoolbar({ tapToggle: false });

});

Resource: https://github.com/datomnurdin/service-finder-mobile