Sunday 10 March 2013

Jquery Mobile header footer moving problem while click

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>

Share This!



3 comments:

Here We Write The Problems we face at different situations and Solutions to those problems.