Untitled

<!-- INDEX.HTML -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0-alpha.1.min.css">

        <script type="text/javascript" src="cordova-2.3.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/iscroll.js"></script>

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/jquery.mobile-1.2.0.min.js"></script>
        <title>Parent Guide</title>

        <script>
        //iScroll initiate
            var myScroll;
            function loaded() {
                myScroll = new iScroll('wrapper');
            }
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
        </script>

    </head>

    <body>

        <div data-role="page" id="home">
            <div id="header"><h1>The Parent Guide</h1></div>
            <div id="wrapper">
                <div id="scroller">
                    <div data-role="content" id="content">
                        <div id="grid"></div>
                        <div id="grid_child"></div>
                    </div>
                </div>
            </div>
            <div id="footer"></div>
        </div>

    </body>

    <script>

        document.onload=displayGrid();

        function displayGrid(){
            $('#grid').load('grid.html');
            $('#grid_child').load('empty.html');
            $('#footer').load('hf.html');

        }

        function grid(n){
            $('#grid').load('empty.html');
            $('#grid_child').load(n+'.html');

            if (n.slice(-1) != "i"){
                var footer = document.getElementById("footer");
                footer.innerHTML = '<a href="javascript:displayGrid()"><div class="footer_home"></div></a><a href="javascript:grid('+n+'i)"><div class="footer_ideas"></div></a>';
            } else {
                var footer = document.getElementbyId("footer");
                footer.innerHTML = '<a href="javascript:grid('+n+')"><div class="footer_backfull"></div></a>';
            }
        }
    </script>

</html>


<!-- GRID.HTML -->
<a href="javascript:grid(1)"><div class="gridIcon"><img src="img/grid_01.png"><span>Grid item 1</span></div></a>

<!-- EMPTY.HTML -->

<!-- 1i.HTML -->
<p>Information Here</p>