I'm using App.js (Javascript UI library) and Zepto.js (JQuery-like library) to make a mobile application. The code below is not from my application, but demonstrates the exact problem I am having. I tried to keep it as short as possible. The clicked image should remain visible on page1 before it is shown again on page2, but now the clicked image disappears on page1, which makes the transition to page2 look messy.
Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again to see the problem.
Any and every help is very much appreciated. It seems this problem exceeds my skills :D My guess is this has something to do with the libraries I'm using.
App.load('page1');
App.controller('page1', function(page) {
$(page).find('img').on('click', function() {
App.load('page2');
$('#clicked-img-container').html($(this));
});
});
App.controller('page2', function(page) {
});img {
width: 150px;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
<!-- Default stylesheet provided with App.js.
Contains iOS/Android styles for all included widgets. -->
<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</head>
<body>
<!-- Page1 -->
<div class="app-page" data-page="page1">
<div class="app-topbar">
<h1>Page 1</h1>
</div>
<div class="app-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
<div class="app-button" data-target="page2">Go to page 2</div>
<p>Click the images. If nothing happens, go to page2 and then
back to page1 and try clicking again to see the problem I'm experiencing:
<strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
</div>
</div>
<!-- Page1 -->
<div class="app-page" data-page="page2">
<div class="app-topbar">
<h1>Page 2</h1>
</div>
<div class="app-content">
<div id="clicked-img-container"></div>
<div class="app-button" data-target="page1">Go to page 1</div>
</div>
</div>
<!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- core module containing all library functionality -->
<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>
</html>Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again...
I am not familiar with this framework but I think the problem here is that your code is trying to find elements in order to add controllers to them before they are actually added to the DOM. I downloaded the example from the Getting started page: http://code.kik.com/app/3/docs.html and noticed that there is different approach, so I added the following code after adding the controllers:
try {
App.restore();
} catch (err) {
App.load('page1');
}
The clicked image disappears when clicked which makes the page transition look messy.
This is solved if you add a clone of the image to the DOM:
$('#clicked-img-container').html($(this).clone());
Also, the default transition is fade which might be messy regarding your case. You can play around with options provided here. I have added slide-left to show you how.
Working example follows:
//App.load('page1');
App.setDefaultTransition('slide-left'); // global
App.controller('page1', function(page) {
$(page).find('img').on('click', function() {
App.load('page2');
$('#clicked-img-container').html($(this).clone());
});
});
App.controller('page2', function(page) {
});
try {
App.restore();
} catch (err) {
App.load('page1');
}img {
width: 150px;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
<!-- Default stylesheet provided with App.js.
Contains iOS/Android styles for all included widgets. -->
<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</head>
<body>
<!-- Page1 -->
<div class="app-page" data-page="page1">
<div class="app-topbar">
<h1>Page 1</h1>
</div>
<div class="app-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
<div class="app-button" data-target="page2">Go to page 2</div>
<p>Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again to see the problem I'm experiencing:
<strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
</div>
</div>
<!-- Page2 -->
<div class="app-page" data-page="page2">
<div class="app-topbar">
<h1>Page 2</h1>
</div>
<div class="app-content">
<div id="clicked-img-container"></div>
<div class="app-button" data-target="page1">Go to page 1</div>
</div>
</div>
<!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- core module containing all library functionality -->
<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>
</html>