Languages

Menu
Sites
Language
Page Transition Is not Working Properly

I have  three page in my signle html file. And i am chaning Pages on Button Click Now i am changing page with transition but when page is changed there appears white space between page transition and also give jerk effect i tried my code on all other web supported devices this is working perfectly but when i run this on tizen it gives me these problems i added all javascript helping libraraies applied all approaches but its not working. Hours and Hours attempts are all in vain. and another problem is that when i change my page it seems that onPageChange layout settings of page change again and again. Any body who can help me out in this problem? 

 

Project is Create in Tizen Web UI FW MUltiple Pages

Flow is:

 

 

1------ Page One (Home Page---First Loaded Page) This page have two buttons and background image

2------ Page Two (this page have some input type images and a button which which goes back to the Home Page)

3------Page Three (This page Also have SOme divs and a button Which goes back to the Home Page)

 

 
    <meta content="width=device-width,initial-scale=0.50, user-scalable=no"
name="viewport">
    
 
   
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery.mobile-1.3.1.min.js"></script>
 
 
    <!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
    <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
    <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
    <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
        data-framework-theme="tizen-white"></script>
 
<body>
    <!-- Start of first page: #one -->
    <div data-role="page" id="one">
       <div id='home' >
 
    <input type="image"  id='button_1'  src="images/image_1.png"  onclick="first_function();"/>
  <input type="image"  id='button_2' src="images/image_2.png" onclick="second_function();" />
 
 
         </div>
    </div><!-- /page one -->
 
 
 <!-- Start of second page: #two -->
    <div data-role="page" id="two">
    
    
   
<div id="fullpage">
<img id="player" src="./images/rect.png"
style="margin-left: 65px" />
 
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 65px;"
onclick="myFunction('1','1');" id="1" value=" " name=""/>
 
 
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 30px;"
onclick="myFunction('2','1');" id="2" value=" " name=""/>
 
<input  type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 50px;"
onclick="myFunction('3','1'); " id="3" value=" " name=""/>
 
 
 
<div id="home-btn">
 
 
<input type="image" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 210px;"
src="images/home.png"
 value=" " name="home" onClick="home_function();"/>
 
 
 
</div>
 
 
 
</div>
    
    </div><!-- /page two -->
 

 

 <!-- Start of second page: #three -->
    <div data-role="page" id="three">
    
<div style='display: block; background-image: url(./images/imagee1.jpg);'   >
 
<button class="stage1"
style="width: 280px; height: 130px; margin-top: 25px; margin-left: 40px; background: transparent;"
onclick="audio('11')" ></button>
<button class="stage1"
style="width: 280px; height: 340px; margin-top: 20px; margin-left: 960px; background: transparent;"
onclick="audio('22')" ></button>
 
<button id="home" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 255px; background: url('./images/home.png');" onClick="home_function();"></button>
 
<button class="stage1"
style="width: 220px; height: 290px; margin-top: 435px; margin-left: 40px; background: transparent;"
onclick="audio('33')"></button>
<button class="stage1"
style="width: 210px; height: 290px; margin-top: 435px; margin-left: 300px; background: transparent;"
onclick="audio('44')" ></button>
<button class="stage1"
style="width: 240px; height: 290px; margin-top: 435px; margin-left: 550px; background: transparent;"
onclick="audio('55')"></button>
<button class="stage1"
style="width: 415px; height: 290px; margin-top: 435px; margin-left: 830px; background: transparent;"
onclick="audio('66')"></button>
 
</div>

</div>

 

Javascript:

 

 

   <script>
function second_function()
{
 
   
 
 
$.mobile.changePage('#two',{transition: 'slide',allowSamePageTransition: true});
 
 
 
 }
 
 
 function home_function()
{
 
$.mobile.changePage('#one',{transition: 'slide',reverse : true,allowSamePageTransition: true});
 
 
 
 }
 
 function second_function()
 {
 
 
$.mobile.changePage('#three',{transition: 'slide',allowSamePageTransition: true});
 
 }
 
 
</script>

 

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

6 Replies
Lakshmi Grandhi
Why don't you try this sample code . Hope it helps 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="description"
	content="A Tizen Web UI FW single-page template generated by Tizen Web IDE" />

<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework
	- Single-Page</title>
<!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
	data-framework-theme="tizen-white"></script>

<!--NOTE:
        Additional scripts and css files are to be placed here.
        You can use jQuery namespace($) and all functionalities in jQuery
        in your script.  For example:

            <script src="main.js"></script>
            <link rel="stylesheet" href="my.css">
    -->
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>

<!-- Page1 -->
	<div data-role="page" data-add-back-btn="footer" id="page1">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
		<h1>PAGE1</h1>
			<a href="#page2" data-role="button" data-inline="true" data-transition="slide">Page2</a>
			<a href="#page3" data-role="button" data-inline="true" data-transition="slide">Page3</a>
		</div>
		<div data-role="footer">Footer</div>

	</div>
	
<!-- Page2 -->	
	<div data-role="page" data-add-back-btn="footer" id="page2">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<h1>PAGE2</h1>
			<a href="#page1" data-role="button" data-inline="true" data-transition="slide">Home Page</a>
		</div>
		<div data-role="footer">Footer</div>

	</div>
	
<!-- Page3 -->	
	<div data-role="page" data-add-back-btn="footer" id="page3">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<h1>PAGE3</h1>
			<a href="#page1" data-role="button" data-inline="true" data-transition="slide">Home Page</a>
		</div>
		<div data-role="footer">Footer</div>

	</div>
</body>
</html>
Noureen Akhter
Its also giving white page and in your code background of page is not set but in my case i have background images set on pages then background images and page with white bakcground differs alot
Lakshmi Grandhi
hi i added background image to my code it is showing some jerking effect so i removed "data-transition="slide" in <a href> from the code i have posted before then i am not able to see any jerk effect or white pages it is working fine now.
Noureen Akhter
I am unable to understand that why my approach is not working . I haven't add any other lib so why its giving jerk and white transition on every given approach
Marco Buettner
why you include older versions of jquery and jquery-mobile? jQuery 1.8.2 and jQuery Mobile 1.2.0 are already included with
Marco Buettner
Ok I see you use jQuery 1.3.0 ... but did you use 1.3.0 only functions in your app?