Skip to content

Instantly share code, notes, and snippets.

@dhavaln

dhavaln/footer.html

Created June 6, 2012 05:42
Show Gist options
  • Save dhavaln/2880107 to your computer and use it in GitHub Desktop.
Save dhavaln/2880107 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery mobile fixed footer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<style type="text/css">
.box-center{
width: 240px;
margin: 0px auto 20px auto;
}​
</style>
<script type="text/javascript">
$('[data-role=page]').live('pageshow', function (event, ui) {
$("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>
My App
</h2>
<a href="page1" data-role="button" data-theme="c" data-icon="refresh" data-iconpos="left" data-transition="none">
Update
</a>
</div>
<div data-role="content">
<div class='box-center'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
</legend>
<input id="radio1" name="radiobuttons1" value="recentview" type="radio"/>
<label for="radio1">
By Recent
</label>
<input id="radio2" name="radiobuttons1" value="feedview" type="radio" />
<label for="radio2">
By Feed
</label>
<input id="radio3" name="radiobuttons1" value="typeview" type="radio" />
<label for="radio3">
By Type
</label>
</fieldset>
</div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsible" data-collapsed="false">
<h3>
Section 1
</h3>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Section 2
</h3>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Section 3
</h3>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Section 4
</h3>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Section 5
</h3>
</div>
</div>
</div>
<div data-role="footer" data-theme="d" data-position="fixed">
</div>
</div>
</body>
</html>​
@Herchi
Copy link

Herchi commented Jun 21, 2012

it works! but I have a problem. The footer RELOADS every time you click in a "new" element of the 'navbar'. If you click in an element just visited you won't have this disturbing effect :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment