Page Transition Is not Working Properly

Page Transition Is not Working Properly

BY 19 Jun 2013 Web Application Development

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>

 

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More