error when clicking on the 5th tab of footer

2 posts, 0 answers
  1. Rozen
    Rozen avatar
    13 posts
    Member since:
    Aug 2013

    Posted 18 Aug 2013 Link to this post

    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>
            

  2. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 19 Aug 2013 Link to this post

    its a typo:

    <div id="buyeview" data-role="view" >
                    <h1>Buy</h1>
            </div>

    just remove the e, and it will work.

Back to Top