Intel app framework all panels loading on startup

Question

Any ideas why I'm seeing all panels loaded on first page instead of just one that has attribute 'selected' set?

My html looks like this:

    <div  id="afui">

        <div id="content">
            <div title="Home" id="main" class="panel"  data-header="none" data-footer="none" selected="true">

                <div id="main-container" class="container-fluid">

                    <div class="row">
                        <div class="logo-container">
                            <img src="img/mr_scan.png">
                        </div>
                    </div>

                    <div class="row text-container ">
                        <div>
                            <h1 class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</h1>    
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                        </div>
                    </div>

                    <div class="row">
                        <a href="#page_scratch"><button  type="submit" class="col-xs-12 start-button">POKRENI</button></a>
                    </div>
                </div>

            </div>      
            <div id="page_scratch" data-title="Scratch" class="panel" data-header="none" data-defer="scratch.html" data-load="intialiseScratch"  >

            </div>   
        </div>     
    </div>

As for script load order, its something like this:

    <script type="text/javascript" charset="utf-8" src="js/jquery.1.11.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/af.ui.jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="xhr.js"></script>
    <script type="text/javascript" src="js/wScratchPad.min.js "></script>

    <script type="text/javascript">
        $.ui.autoLaunch = false;
        /* Intel native bridge is available */
        var onDeviceReady = function() {

            intel.xdk.device.setRotateOrientation("portrait");
            intel.xdk.device.setAutoRotate(false);
            webRoot = intel.xdk.webRoot + "";
            //hide splash screen
            $.ui.launch();
            intel.xdk.device.hideSplashScreen();
            $.feat.nativeTouchScroll = true;
            $.ui.slideSideMenu = false;

        };
        document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
    </script>

Answer 1

You also have to include the appframework stylesheet:

<link rel="stylesheet" type="text/css" href="af.ui.css"  />