Im trying to replicate JQuery Mobiles page transitions in using only Jquery but I cant get it to work. What im trying to achieve is a pagecontainer div holding a page and when a href is clicked it will fetch page via ajax and replace the current page div with the new one and append some css to make the transition. Could someone please tell me what Im doing wrong:
index.html:
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js">
$(document).ready(function() {
$("#pagecontainer").gumbyPageTransition();
});
</script>
</head>
<body>
<div id="pagecontainer">
<div class="page"> <!-- SHOULD BE REPLACE BY test.html WHEN LINK IS CLICKED -->
<div class="container">
<div class="row">
<div class="twelve columns">
<div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div>
</div>
</div>
</div>
</div>
</div>
</body>
test.html
<div class="page">
<div class="container">
<div class="row">
<div class="twelve columns">
<div style="width:100%;" class="large btn default"><a href="index.html" class="pagehref" transition="right">Page 2</a></div>
</div>
</div>
</div>
</div>
My JS function:
(function($){
$.fn.extend({
gumbyPageTransition: function() {
var container = $(this);
return this.each(function() {
$("a.pagehref").click(function(event){
var currentPage, nextPage;
event.preventDefault();
linkLocation = $(this).attr('href');
transition = $(this).attr('transition');
currentPage = $(container).find('.page');
$.get(linkLocation).success(function(loadedHtml) {
var div = $("<div>").html(loadedHtml);
var nextPage = $(".page", div.get(0));
container.append(nextPage.html());
nextPage.attr("class", "page " + transition);
currentPage.one('webkitTransitionEnd', function(e) {
$(e.target).remove();
});
container[0].offsetWidth;
nextPage.attr("class", "page transition center");
currentPage.attr("class", "page transition " + (transition === "left" ? "right" : "left"));
$(container).gumbyPageTransition();
});
});
});
}});})(jQuery);
My css:
#pagecontainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.right {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.page.center {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.left {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.page.transition {
-webkit-transition-duration: .25s;
transition-duration: .25s;
}
Sorry if the formatting is messed up.
Also, how do I create a callback method similare to on.pageinit for jquery mobile (a function in my header that will be called when the page is done loading and a parameter for which page that was loaded)
EDIT:
The problem seems to be that the code below alerts undefiend
$.get(linkLocation).success(function(loadedHtml) {
alert(loadedHtml); --> Alerts the html, so this seems to work
var nextPage = $(loadedHtml).find('#page');
alert(nextPage.html()); --> Says undefiend
I got a few comments on the formatting of the code but since then its been quiet? Let me know if the code needs more formatting.
EDIT: By wrapping the test.html in html, head and body tags I managed to get a hold of the page. BUT, now when I use var nextPage = $(loadedHtml.html()).find(".page"); I end up with the container element instead of the page element, so the HTML before transition looks like this:
<div id="pagecontainer">
<div class="page transition right">
<div class="container">
<div class="row">
<div class="twelve columns">
<div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div>
</div>
</div>
</div>
</div>
<div class="container"> <--- THIS IS WRONG SHOULD BE PAGE
<div class="row">
<div class="twelve columns">
<p>test test test</p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div style="width:100%;" class="large btn default"><a href="test.html" transition="left" class="pagehref">Page 1</a></div>
</div>
</div>
</div>
</div>
This is driving me crazy, what am I doing wrong?
EDIT: Pjuh, fixed it: container.append(nextPage.html()); should be container.append(nextPage);
Thanks
In your HTML "page" is a class
<div class="page">
and in js you are using #page
var nextPage = $(loadedHtml).find('#page');
Use the below line
var nextPage = $(loadedHtml).find('.page');