Response title
This is preview!
- Screen name: keithh66
keithh66's Profile
1 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 23-Feb-2013 02:30 PM
- Forum: jQuery Mobile
When using jquery swipe, the CSS of the first page changes when showing the second page. However, if I just use a simple link, it maintains the CSS.Can someone please help explain what I am doing wrong to get this result?Here's the basic code:<!DOCTYPE html>
<html>
<head>
<title>jtest</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" title="standard" rel="stylesheet" href="themes/jquery.mobile-1.2.0.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script>
$(function() {
$('.swipe').bind( 'swiperight', function(event){
$('#bar').show();
$('#foo').hide();
});
$('.swipe').bind( "swipeleft", function(event){
$('#foo').show();
$('#bar').hide();
});
});
</script>
</head><body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Hole 1</h1>
</div><!-- /header -->
<div data-role="content">
<div class='swipe'>
PAGE 1
<p>Next Page <a href="#bar">bar</a></p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page --><!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Hole 2</h1>
</div><!-- /header -->
<div data-role="content">
<div class='swipe'>
PAGE 2
<p>Previous Page <a href="#foo">foo</a></p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>- «Prev
- Next »
Moderate user : keithh66
