This question is locked. New answers and comments are not allowed.
when ever i clicked on the last tab of footer it shows the white screen and go back to the beginning tab. I dont know why Please help. I have posted the code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<div id="tutorialview" data-role="view" >
<h1>Tutorial</h1>
</div>
<div id="catalogueview" data-role="view" >
<h1>Catalogue</h1>
</div>
<div id="promoview" data-role="view" >
<h1>Promotions</h1>
</div>
<div id="faqview" data-role="view" >
<h1>FAQ</h1>
</div>
<div id="buyeview" data-role="view" >
<h1>Buy</h1>
</div>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout" >
<!--Header-->
<header data-role="header">
<div data-role="navbar">
My app
</div>
</header>
<!--Footer-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#tutorialview" data-icon="home">Tutorial</a>
<a href="#catalogueview" data-icon="contacts">Catalogue</a>
<a href="#promoview" data-icon="search">Promotions</a>
<a href="#faqview" data-icon="globe">FAQ</a>
<a href="#buyview" data-icon="globe">Buy</a>
</div>
</footer>
</div>
<script>
var app = new kendo.mobile.Application(document.body, {transition: "slide", layout: "tabstrip-layout", initial:"catalogueview"});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<div id="tutorialview" data-role="view" >
<h1>Tutorial</h1>
</div>
<div id="catalogueview" data-role="view" >
<h1>Catalogue</h1>
</div>
<div id="promoview" data-role="view" >
<h1>Promotions</h1>
</div>
<div id="faqview" data-role="view" >
<h1>FAQ</h1>
</div>
<div id="buyeview" data-role="view" >
<h1>Buy</h1>
</div>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout" >
<!--Header-->
<header data-role="header">
<div data-role="navbar">
My app
</div>
</header>
<!--Footer-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#tutorialview" data-icon="home">Tutorial</a>
<a href="#catalogueview" data-icon="contacts">Catalogue</a>
<a href="#promoview" data-icon="search">Promotions</a>
<a href="#faqview" data-icon="globe">FAQ</a>
<a href="#buyview" data-icon="globe">Buy</a>
</div>
</footer>
</div>
<script>
var app = new kendo.mobile.Application(document.body, {transition: "slide", layout: "tabstrip-layout", initial:"catalogueview"});
</script>
</body>
</html>
1 Answer, 1 is accepted
0
domiSchenk
Top achievements
Rank 1
Rank 1
answered on 19 Aug 2013, 11:14 AM
its a typo:
<div id="buyeview" data-role="view" >
<h1>Buy</h1>
</div>
just remove the e, and it will work.
<div id="buyeview" data-role="view" >
<h1>Buy</h1>
</div>
just remove the e, and it will work.