same page transitions mobile

by manoj

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body>
   
<div data-role="page" id="page1" data-theme="a">

  <div data-role="header">
    <h1>same page transitions</h1>
    <div data-role="navbar" id="navh1">
      <ul>
        <li><a href="#page1">fade</a></li>
        <li><a href="#page1">pop</a></li>
        <li><a href="#page1">flip</a></li>
        <li><a href="#page1">turn</a></li>
        <li><a href="#page1">flow</a></li>
      </ul>
    </div>
  </div><!-- /header 1 -->

  <div data-role="content">
     <h1>same page transitions</h1>
     <div>All links within this page navigate to the page itself having the <code>allowSamePageTransition</code> option at <code>changePage()</code> method set to <strong>true</strong>. It seems, just the slide transition raises an issue so the page gets hidden.
      <label><input type="checkbox" id="cb1" data-theme="b"/> reverse transition </label>
      <label><input type="checkbox" id="cb2" data-theme="b"/> add ui-page-active on pageshow </label>
    </div>
      <div id="p1"></div>
    </div><!-- /content 1 -->

  <div data-role="footer">
    <div data-role="navbar" id="nav1">
      <ul>
        <li><a href="#page1">slide</a></li>
        <li><a href="#page1">slidefade</a></li>
        <li><a href="#page1">slideup</a></li>
        <li><a href="#page1">slidedown</a></li>
        <li><a href="#page1">none</a></li>
      </ul>
    </div>
  </div><!-- /footer 1 -->

<script>
$('#page1').live('pageinit', function() {

    $('a').bind('click', function(e) {
    var trans = $(this).text() || 'none',
        rev = !!$('#cb1').attr('checked');

    $.mobile.changePage('#page1', { transition:...

CSS

.ui-header .ui-title { margin: .6em 5% .8em !important; }
h1 { margin: .6em auto; text-align:center; }
.ui-checkbox { margin: 2em 5% !important; }
#p1 { font-weight: bolder; }