This post will show how to avoid header, footer moving up and down while clicking
to avoid this problem add data-tap-toggle="false" at header and footer
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>App</title>
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
<link rel="stylesheet" href="includes/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="includes/styles.css" />
<script src="includes/jquery-1.9.0.min.js"></script>
<script src="includes/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header
</div>
<div data-role="content">
<h1>Hi</h1>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">By Footer</div>
</div>
</body>
to avoid this problem add data-tap-toggle="false" at header and footer
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>App</title>
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
<link rel="stylesheet" href="includes/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="includes/styles.css" />
<script src="includes/jquery-1.9.0.min.js"></script>
<script src="includes/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header
</div>
<div data-role="content">
<h1>Hi</h1>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">By Footer</div>
</div>
</body>
0 comments:
Post a Comment