Need help with Swipe and panel in one page
Hi
I am trying to use both swipe and panel in one page.
this works fine with panel:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="overlayPanel" data-display="overlay">
<h2>Overlay Panel</h2>
<p>You can close the panel by clicking outside the panel</p>
</div>
<h1>jQuery Mobile Example</h1>
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="overlayPanel" data-display="overlay">
<h2>Overlay Panel</h2>
<p>You can close the panel by clicking outside the panel</p>
</div>
<h1>jQuery Mobile Example</h1>
</div>
</div>
</body>
</html>
but now i want to add this swipe:
<div data-role="page" data-swiperight="MyNews5.asp" data-swipeleft="MyNews2.asp">
<div data-role="header">
</div>
<!-- /header -->
<div data-role="content">
<div data-role="header">
</div>
<!-- /header -->
<div data-role="content">
where do i add this in the page. i tried few places on the page but it doesnt work.
basically i want to use both swipe and panel in one pane.
Many thanks for help