The footer tabs work great and the footer change without blinking, but the headers keep blinking when you click the tabs. How can I stop the blinking?
I've tried a few solutions I have found online which have helped others but did not work for me, I must be doing something wrong.
Below is my HTML. Thanks in advance!
Edit : I figured it out.. I needed datatransition="none"
<a href="#Page2" data-role="tab" data-transition="none" >
Now it works
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Test</title>
<link rel="stylesheet" href="themes/mytheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="phonegap.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="Page1" >
<div data-role="header" >
<h1>Navbar Test</h1>
</div>
<div data-role="content" data-theme="a">
<h2>Here is the first tab</h2>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed" >
<div data-role="navbar">
<ul>
<li><a href="#Page1" data-role="tab" class="ui-btn-active ui-state-persist">Info</a></li>
<li><a href="#Page2" data-role="tab">Friends</a></li>
<li><a href="#Page3" data-role="tab">Albums</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page-->
<!-- End Page 1 -->
<!-- Page 2 -->
<div data-role="page" id="Page2" >
<div data-role="header" >
<h1>Navbar Test</h1>
</div>
<div data-role="content" data-theme="a">
<h2>Here is the second tab</h2>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed" >
<div data-role="navbar">
<ul>
<li><a href="#Page1" data-role="tab">Info</a></li>
<li><a href="#Page2" data-role="tab" class="ui-btn-active ui-state-persist">Friends</a></li>
<li><a href="#Page3" data-role="tab">Albums</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page-->
<!-- End Page 2 -->
<!-- Page 3 -->
<div data-role="page" id="Page3" >
<div data-role="header">
<h1>Navbar Test</h1>
</div>
<div data-role="content" data-theme="a">
<h2>Here is the third tab</h2>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed" >
<div data-role="navbar">
<ul>
<li><a href="#Page1" data-role="tab">Info</a></li>
<li><a href="#Page2" data-role="tab">Friends</a></li>
<li><a href="#Page3" data-role="tab" class="ui-btn-active ui-state-persist">Albums</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page-->
<!-- End Page 3 -->
</body>
</html>