MOBILE - Page Transition

by bizamajig

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body> 
<div class="header"><h1>I am a header</h1></div>
<div id="pageContainer" style="position: relative !important; height: 100%;">
    <div data-role="page" id="test1">

        <div data-role="header">
            <h1>Page Title</h1>
        </div><!-- /header -->
        
        <a id="page2link">To Page 2</a>

        <div data-role="content">    
            <p>Page content goes here.</p>        
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
    
    <div data-role="page" id="test2" style="height: 568px">

    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    
    <a id="page1link">To Page 1</a>

    <div data-role="content" style="height:auto;">
        <p style="height: 80%; border: 1px solid black;">This is page 2</p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>

</div><!-- /page -->
</div><!-- /page -->
</div>

CSS

a {
 cursor: hand;
cursor: pointer;    
}

JavaScript

$(function() {
$.mobile.defaultPageTransition = "slide";    
    $('#page2link').click(function() {
       $.mobile.changePage($('#test2'));
    });
        
    $('#page1link').click(function() {
       window.history.back();
    });
});