<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link href='http://jimasea.com/css/main.css' rel='stylesheet' type='text/css' />
<link href='http://jimasea.com/css/mainbr.css' rel='stylesheet' type='text/css' />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--<script src="http://jimasea.com/scripts/common.js"></script>
<script src="http://jimasea.com/scripts/subscribers.js"></script>-->
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="script.js"></script>
</head>
<body>
<div id="br_marketsetup" data-role="page" data-dom-cache="false" data-theme="a" style="width:917;px">
<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Header</h1>
</div>
<!--end Header div -->
<div data-role="content" class="main-content">
<div class="leftsidemenu">
<div class="leftside-container" style="margin-top: 20px; width: 19%; min-width:230px;">
<ul data-role="listview" data-corners="false" data-theme="">
<li><a id="mybutton" onclick="slidepage('l')" class="ui-btn">Slide Left</a>
</li>
<li><a id="mybutton" class="ui-btn">Other Menu 1</a>
</li>
<li><a id="mybutton" class="ui-btn">Other Menu 2</a>
</li>
<li><a id="mybutton" class="ui-btn">Other Menu 3</a>
</li>
<li><a id="mybutton" class="ui-btn">Other Menu 4</a>
</li>
</ul>
</div>
</div>
<div class="leftside center-div" style="width:80%;min-height: 600px;">
<div id="div_counterSignup" class="tabWrapper" style="height: inherit">
<div id="outerwindow" style="width:200%;height: inherit;">
<div class="needtomove leftside" style="width:50%;height:500px;padding-top: 0px;margin-top: 0px;background-color:yellow;">
<p>Left side</p>
</div>
<div id="leftside_slide" class="leftside needtomove" style="width:50%;height:500px;background-color:grey;text-shadow:none;">
<p>Right Side - Hit browser's back button</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
function slidepage(direction) {
if (direction == 'l' && !$(".needtomove").hasClass("pt-page-moveToLeft")) {
$(".needtomove").addClass('pt-page-moveToLeft');
$(".needtomove").removeClass('pt-page-moveFromLeft');
$.mobile.pageContainer.pagecontainer("change", location.href, {
transition: "none",
allowSamePageTransition: true
});
window.history.pushState({}, document.title, location.href);
}
}
$(document).on("pagecontainerbeforechange", function(e, data) {
if (typeof data.toPage == "object" && data.options.direction == "back" && data.toPage.jqmData("url") == data.prevPage.jqmData("url")) {
$(".needtomove", data.toPage).toggleClass("pt-page-moveToLeft pt-page-moveFromLeft");
console.log("Animating...");
}
});
/* Styles go here */
.leftside {
float: left;
/*padding: 10px;*/
padding-right: 0px;
}
.leftside-container {
min-height:600px;
float: left;
padding-right: 0px;
min-width:200px;
width:20%;
}
div.leftsidemenu ul.drop-menu {
margin-top:0px;
padding-right:10px;
}
div.leftsidemenu ul {
overflow: hidden;
}
div.leftsidemenu li, div.leftsidemenu li.ui-btn {
margin-right:15px;
padding-left:10px;
overflow:hidden;
}
.tabWrapper {
margin-left: 0px;
padding-left: 0px;
min-height: 700px;
overflow: hidden;
/*border:solid thin #CECECE;*/
min-width: 500px;
}