I am working with a multi page layout, and am using swipe to navigate back and forth. Currently my page has 3 "pages", defined with 3 <div> sections with data-role="page" and each is named with id="page1", id="page2", id="page3"
Within each "page", I have a primary block of content included in a <div> tag with the appropriate ID set to "body1", "body2" and "body3". I have swipe events set on these to navigate from page to page as follows:
<script type="text/javascript">
$("#body1").swipeleft(function () {
$.mobile.changePage("#page2", { transition: "slide" });
});
$("#body2").swipeleft(function () {
$.mobile.changePage("#page3", { transition: "slide" });
});
$("#body2").swiperight(function () {
$.mobile.changePage("#page1", { transition: "slide", reverse: true });
});
$("#body3").swiperight(function () {
$.mobile.changePage("#page2", { transition: "slide", reverse: true });
});
</script>
This all seems to be working fine. When I swipeleft on body1, I am taken to page2 - when I swipeleft on body2 I am taken to page3 - when I swiperight on body3 I am taken to page2 - and when I swiperight on body2 I am taken to page1
The problem comes in looking at the URL displayed in my browser address bar. When first going to the sight, I am on "page1" by default, which is not displayed in the url - it is simply:
This isn't the true URL obviously, but you get the picture - the file containing all the content is "mypage.aspx" living in the "mysitedirectory"
When I swipe left on body1 to navigate to "page2" the URL now shows as
So far so good - even when doing a swiperight on "body3" to get back to page2 all is good, and the URL once again shows
The problem comes in whenever I swiperight on "body2" to get back to "page1", the default page that I started on. Every time I navigate back to page1 swiping right from body2 on page2, the URL displays:
I am not really sure where this is coming from...or how to stop it. It should either show as
Any thoughts on this??