Response title
This is preview!
Move this topic
Double transition the page
in jQuery Mobile
•
10 years ago
Hi all!
I have such a problem, a link with href to another page with data-transition (no matter what kind of transition I use) and also changePage() with transition too...So, the pages in both cases, when link is clicked or changePage called, apear for a second, then desapear and then load normally.
Why can it be?
I have such a problem, a link with href to another page with data-transition (no matter what kind of transition I use) and also changePage() with transition too...So, the pages in both cases, when link is clicked or changePage called, apear for a second, then desapear and then load normally.
Why can it be?
1
Replies(2)
Re: Double transition the page
10 years ago
its supposed to work normally..
if you provide a simple sample or jsfiddle, it will be easy for somebody to figure out whats wrong....
Re: Re: Double transition the page
10 years ago
Hi poonkave.
Here is my sample:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="css/additional.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mobile.structure-1.2.1.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page1").swipe( {
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$.mobile.changePage($("#page2"), {transition: "slide"});
},
threshold:30
});
$("#page2").swipe( {
swipeRight:function(event, direction, distance, duration, fingerCount) {
$.mobile.changePage($("#page1"), {transition: "slide", reverse: true});
},
threshold:30
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-id="header">
<div id="header_wrapper">
<div class="header_div">
<a href="page3.php" data-transition="slidedown">
<div>Some Staff</div>
</a>
</div>
</div>
</div>
<div data-role="content" id="content">Some Content</div>
<div data-role="footer">Footer Content</div>
</div>
<div data-role="page" id="page2"></div> (the same structure here)
</body>
</html>
pag3.php
<div data-role="page" id="page3">Some Content Too</div>
I test this in Android 2.2 and 2.3, webkit browsers do blink after events are fired and destination page appears multiple time before displaying and slide effect doesn't work, in opera there are no blinks, pages are loaded normally but again without transitions
Here is my sample:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="css/additional.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mobile.structure-1.2.1.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page1").swipe( {
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$.mobile.changePage($("#page2"), {transition: "slide"});
},
threshold:30
});
$("#page2").swipe( {
swipeRight:function(event, direction, distance, duration, fingerCount) {
$.mobile.changePage($("#page1"), {transition: "slide", reverse: true});
},
threshold:30
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-id="header">
<div id="header_wrapper">
<div class="header_div">
<a href="page3.php" data-transition="slidedown">
<div>Some Staff</div>
</a>
</div>
</div>
</div>
<div data-role="content" id="content">Some Content</div>
<div data-role="footer">Footer Content</div>
</div>
<div data-role="page" id="page2"></div> (the same structure here)
</body>
</html>
pag3.php
<div data-role="page" id="page3">Some Content Too</div>
I test this in Android 2.2 and 2.3, webkit browsers do blink after events are fired and destination page appears multiple time before displaying and slide effect doesn't work, in opera there are no blinks, pages are loaded normally but again without transitions
Leave a comment on John Chacko's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to naira.g's question