This is the html code I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script>
$('#home, #page2, #page3').live('pagebeforeshow',function(event){
$('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Home Page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Second page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Third page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The problem I am facing is that sometimes when i change selection of navbar,the footer also slides to the left or right along with the page.You can reproduce the issue by constantly changing the selection of button in the navbar.
You can see it here – http://jsfiddle.net/tKMgd/5/
I did not do anything specific to solve this problem.But over the course of the time the issue is not happening.In between I had updated the JQM versions i have been using and now using JQM 1.1