CODEWITHSUNDEEP
jquery-mobile
Thorsten
Thorsten

Reputation: 19

jquery mobile fixed footer is moving while slide-transition

I have a set of 2 very basic pages in jQuery Mobile:

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        Header 1
    </div>
    <div data-role="content">
        Content 1
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <button>next</button>
    </div>
</div>
<div data-role="page2" id="page">
    <div data-role="header">
        Header 2
    </div>
    <div data-role="content">
        Content 2
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <button>next</button>
    </div>
</div>

On buttonclick I do a page-transition to the other page:

$("#page1 button").on("click", function(){
    $.mobile.changePage($("#page2"), {transition: "slide", reverse: false, changeHash: false});
});
$("#page2 button").on("click", function(){
    $.mobile.changePage($("#page1"), {transition: "slide", reverse: false, changeHash: false});
});

But while the transition is running, the footer jumps out of position and moves almost out of the page at the bottom of the page.

How can I avoid that sideeffect?

Upvotes: 2

Views: 659

Answers (1)

deblocker
deblocker

Reputation: 7687

Beside your typo here: <div data-role="page2" id="page"> which shall be <div data-role="page" id="page2">, i think your question is interesting, because i believe you would like to explore the features of the fixed external toolbars of JQM 1.4.5:

From JQM documentation here Fixed external toolbars:

External toolbars are outside of the page they are not effected by transition

Here is a simple example of navigation with an external toolbar, with just one header, one footer and one navigation button where the navigation link and page title are set dynamically:

$(function(){
  $("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a",
    position: "fixed",
    tapToggle: false
   });
});

$(document).on('click', '#btn-next', function () {
  var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
  var pages = {"page2": "#page1", "page1": "#page2"};
  $(":mobile-pagecontainer").pagecontainer("change", pages[pageId], {
    transition: "slide",
    reverse: false,
    changeHash: false
  });
});

$(document).on("pagecontainerchange", function() {
  $("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});
.footer-button-left {
  position: absolute !important;
  margin: 0 !important;
  top: auto !important;
  bottom: 0.24em !important;
  left: 0.4em !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="header">
    <h2>Header</h2>
  </div>
  <div data-role="page" data-title="Header 1" id="page1">
    <div data-role="content">
      Content 1
    </div>
  </div>
  <div data-role="page" data-title="Header 2" id="page2">
    <div data-role="content">
      Content 2
    </div>
  </div>
  <div data-role="footer">
    <h2>Footer</h2>
    <button id="btn-next" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left">next</button>
  </div>
</body>
</html>

Please note, initial text in header & footer is required as placeholder, as well a bit of custom styling for the button inside the footer.

Upvotes: 1

Related Questions