I have simple list:
By clicking on button on the footer, i'm adding some elements on the header:
Obviously, after this height of main content is changed.
Then i get 2 situations.
1) if i do not refresh the page ,i get this:
2) If i refresh the page by adding $.mobile.activePage.page('refresh') i get this:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page</title>
<script src="tizen-web-ui-fw/latest/js/jquery.min.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<style type="text/css">
#all{
display: none;
}
</style>
</head>
<body>
<div data-role="page" id="main" data-add-back-btn="footer">
<div data-role="header" data-position="fixed">
<div id="head">HEAD</div>
<div id="all">
<form>
<p>aaa</p>
<input type="checkbox" name="all" id="all" />
<label for="all">Select all</label>
</form>
</div>
</div>
<div data-role="content">
<ul data-role="listview">
<li>11111</li>
<li>123423</li>
<li>333333</li>
<li>44444</li>
<li>5555555</li>
<li>666666</li>
<li>7777777</li>
<li>88888888</li>
<li>9999999</li>
<li>aaaaaa</li>
<li>vvvvvv</li>
<li>bbbbbb</li>
<li>kkkkk</li>
<li>eeeeee</li>
<li>pppppp</li>
<li>qqqqqqq</li>
<li>zzzzzz</li>
<li>yyyyyy</li>
<li>ttttttt</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<a href="#" data-role="button" data-icon="naviframe-more"></a>
<div id="edit-btn" data-role="button" data-inline="true" data-style="box" onclick="allc()">Add "Select all"</div>
</div>
</div>
</body>
</html>
main.js:
//Initialize function
var init = function () {
$('div[data-role="page"]:first .ui-btn-back').bind("click", function(event) {
var currentApp = tizen.application.getCurrentApplication();
currentApp.exit();
});
// TODO:: Do your initialization job
console.log("init() called");
};
var allc = function (){
$('#all').show();
$.mobile.activePage.page('refresh');
}
$(document).bind('pageinit', init);
So, how to make dinamic (with height change) header, footer and content correctly?