tundecanhelp
Top achievements
Rank 2
Rank 2
tundecanhelp
asked on 12 Jul 2013, 12:18 PM
I am developing an app that has sever views inside a folder called views. from within my main index.html file if i link to any view within the view folder it does not load in my styles nor transitions all i get is a blank white screen with a word "back" which is for the button in the navbar of the view that loads. Below are the sample code i used.
Index.html file code below.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="defaultlayout">
<!--View content will render here-->
</section>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<a class="button" data-role="button" href="views/about.html">Home</a>
</div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
Another view
</div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
another view 2
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
Here is the code for my about.html
<div data-role="view" id="secondview" data-layout="defaultlayout" data-title="Local View">
<div ><p>Hi, I'm a local view.</p></div>
</div>
Index.html file code below.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="defaultlayout">
<!--View content will render here-->
</section>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<a class="button" data-role="button" href="views/about.html">Home</a>
</div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
Another view
</div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
another view 2
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
<div data-role="view" id="secondview" data-layout="defaultlayout" data-title="Local View">
<div ><p>Hi, I'm a local view.</p></div>
</div>
1 Answer, 1 is accepted
0
Hi,
Kendo UI Mobile transitions work with the code you've provided in the Icenium simulator. Do you have this problem in a specific device when you deploy the app?
If you continue to experience problems, we would appreciate a sample http://jsbin.com/ or a project that we could look into. You could also post to stackoverflow which is monitored by the Kendo UI staff and it is highly likely they might have an idea of what might be the culprit.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Kendo UI Mobile transitions work with the code you've provided in the Icenium simulator. Do you have this problem in a specific device when you deploy the app?
If you continue to experience problems, we would appreciate a sample http://jsbin.com/ or a project that we could look into. You could also post to stackoverflow which is monitored by the Kendo UI staff and it is highly likely they might have an idea of what might be the culprit.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.