Response title
This is preview!
Move this topic
Footer not showing on dynamic page
in jQuery Mobile
•
2 years ago
My page layout
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div id="divResults">
Dynamically generated by JS at runtime
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
It seems that dynamically generated div is pushing footer down (making it invisible for the user)
Any ideas?
2
Replies(6)
Re: Footer not showing on dynamic page
2 years ago
What event are you using to trigger the placement of the dynamically generated content and do you have any styles applied to the #divResults?
I have added dynamic content to my pages without any trouble. So some additional information would be helpful.
Leave a comment on elroyjetson's reply
Re: Footer not showing on dynamic page
2 years ago
I’m using HTML 5 DB for storage; however, I can’t get footer to work on data driven pages. This is a simple prototype where I insert dynamic content on users input: (header moves down every time user clicks save).
<!DOCTYPE HTML>
<html>
<head>
<title>aFitness</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile/jquery.mobile.css" />
<script type="text/javascript"
charset="utf-8"
src="jquery.mobile/jquery-1.4.4.js"></script>
<script type="text/javascript"
charset="utf-8"
src="jquery.mobile/jquery.mobile.js"></script>
</head>
<body>
<script language="javascript"
charset="utf-8">
//Jquery Initialized
$(document).ready(function () {
//Save button
$('#btnSave').click(function () { saveInput(); });
});
function saveInput() {
$('#divResults').append('<br/>' + $('#txt1').val()
);
}
</script>
<div data-role="page"
id="jqm-home">
<!-- Header -->
<div data-role="header"
data-position="fixed"
>
Header
</div>
<div data-role="content"
>
<div data-inline="true">
<input
type="text"
name="txt"
id="txt1"
data-inline="true"
value=""
/>
<input
data-inline="true"
id="btnSave"
type="button"
value="Save"
/>
</div>
<br/>
<div id="divResults"></div>
</div>
<!-- footer
-->
<div data-role="footer"
data-position="fixed"
>
Footer
</div>
<!-- footer -->
</div>
</body>
</html>
Thank you for your help.
Re: Footer not showing on dynamic page
2 years ago
You can't really use the $(document).ready() pattern in JQuery Mobile. Take a look at the JQuery Mobile event document.
A couple of things to help you:
First I find JQuery mobile flaky if you don't wrap text in an element, especially in the header and footer. So if you wrap your "header" and "footer" text in an <h1> tag, it will appear more like you expect.
Second, I would recommend either putting you javascript in an external file (optimally), just before the closing </body>, or in the <head>.
I recommend, in the scenario you describe above, to use the 'pagebeforecreate' event since it runs once to bind your 'click' event. You could bind all of your events here. For instance:
- $('div').live('pagebeforecreate', function () {
- $('#btnSave').click(function(){
- $('#divResults').append('<br/>' + $('#txt1').val());
- });
- });
Hope that helps.
Leave a comment on michaelnik's reply
Re: Footer not showing on dynamic page
2 years ago
Thank you for your advice, unfortunately I still see footer moving out of the screen with every save click
<!DOCTYPE HTML>
<html>
<head>
<title>aFitness</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile/jquery.mobile.css" />
<script type="text/javascript"
charset="utf-8"
src="jquery.mobile/jquery-1.4.4.js"></script>
<script type="text/javascript"
charset="utf-8"
src="jquery.mobile/jquery.mobile.js"></script>
<script language="javascript"
charset="utf-8"
type="text/javascript">
$('div').live('pagebeforecreate',
function () {
$('#btnSave').click(function () {
$('#divResults').append('<br/>' + $('#txt1').val());
});
});
</script>
</head>
<body>
<div data-role="page"
id="jqm-home">
<!-- Header -->
<div data-role="header"
data-position="fixed"
>
<h4>Header</h4>
</div>
<div data-role="content"
>
<div data-inline="true">
<input
type="text"
name="txt"
id="txt1"
data-inline="true"
value=""
/>
<input
data-inline="true"
id="btnSave"
type="button"
value="Save"
/>
</div>
<br/>
<div id="divResults"></div>
</div>
<!-- footer -->
<div data-role="footer"
data-position="fixed"
>
<h4>Footer</h4>
</div>
<!--
footer -->
</div>
</body>
</html>
Leave a comment on michaelnik's reply
Re: Footer not showing on dynamic page
2 years ago
Firing .scroll() is the only work around I could
find at the moment. Please let me know if you’ll find better solution. $('div').live('pagebeforecreate', function
() {
$('#btnSave').click(function () {
$('#divResults').append('<br/>' + $('#txt1').val());
$('#jqm-home').scroll();
});
});
Re: Footer not showing on dynamic page
2 years ago
That is a great find. The footer disappearing is actually the designed behavior the way I understand fixed toolbars.
Using the .scroll() helps snap it in. That is great. Hopefully the headers and footers get fixed before to long, they are incredibly buggy.
Leave a comment on michaelnik's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to michaelnik's question
Statistics
- 6 Replies
- 2574 Views
- 1 Followers
