Back button visibility

Nabil_A_1 — Wed, 15 Jun 2016 01:43:52 GMT
Hello ,
I'm working with combination of flip and login template . I face problem regarding the back button where i put the home button in the login page but when i click on the home button to go back to the main page , the main page consist of back button where i dont want it to be there . So , how can i separate the header for each page ? Here is my code :
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>

    <title>Flip View Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js">
    </script>
    
     <style>
        
        @-ms-viewport{
            width: 100vw;
            zoom:100%;
        }
        
        @viewport{
            width: 100vw;
            zoom: 100%;
        }
        
        @-ms-viewport{
            user-zoom:fixed;
        }
        
        @viewport{
            user-zoom:fixed;
        }
    </style>
        
    <script src='cordova.js'></script>
    <script src="js/apps.js"></script>
    <script src="xdk/init-dev.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        
    <link rel="stylesheet" href="/resources/demos/style.css">
        
    <script>

        $(document).ready(function(){

            $("#main").bind("panelbeforeload", startApp);
            // setup signin and signup button events
            $("#login").on("click", function(){
                signIn();
            });

            $("#register").on("click", function(){
                signUp();
            });

        });
        
        //sign in
        function signIn(){


            // SIGNIN SERVER CALL CODE GOES HERE

            valid_login = false;

            if(valid_login){
                $.afui.loadContent("#main", null, null, "fade");
            }
            else
            {
                //Example use of the error toast api
                var opts={
                    message:"Invalid Login Combination",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"
                };
                $.afui.toast(opts);
            }
        }
        
        //sign up
        function signUp(){

            //example client side validation
            if ($("#password").val() === $("#confirmpassword").val())
            {
                // SIGNUP SERVER CALL CODE GOES HERE

                //render main view
                $.afui.loadContent("#main", null, null, "fade");

                //Example use of the success toast
                var opts={
                    message:"Account Created",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"success"
                };
                $.afui.toast(opts);

            }
            else
            {
                //Example use of the error toast
                var opts={
                    message:"Passwords Don't Match",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"
                };
                $.afui.toast(opts);
            }


        }

        function startApp(){
            // clears all back button history
            $.afui.clearHistory();

            // your app code here
        }
        
        //date picker
        $(function() {
            $("#datepicker").datepicker();
        })
        
        //display data
        function myFunction() {
            document.getElementById("demo").innerHTML="6.30a.m.";
            document.getElementById("demo1").innerHTML="4.30a.m.";
        }
        
        function myFunction1() {
            document.getElementById("demos").innerHTML="6.45a.m.";
            document.getElementById("demos1").innerHTML="5.45a.m.";
        }
        
        function myFunction2() {
            document.getElementById("demoss").innerHTML="6.30a.m.";
            document.getElementById("demoss1").innerHTML="3.30a.m.";
        }
        
    </script>

</head>

<body>

    <div id="splashscreen" class='ui-loader heavy'>
        App Framework - Flip View
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>
        <h1>Starting app</h1>
    </div>

    <div class="view" id="mainview">
        <header>
            <h1>Flip View</h1>
            <!--<a id="backButton" class="button back" style="visibility:visible;"></a>-->
            <a href="#page1" class="button" onclick="startApp" style="float:right">Home</a>
        </header>

        <div class="pages">
            <!-- Welcome View -->
            <div class="panel" title="Welcome" id="page1" data-header="none" data-footer="none" selected="true">
                <br>
                <img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
                <div style="text-align:center">
                    <br>
                    <h3>School<br>Management System</h3>
                    <br>
                    <br>
                </div>
                <ul class="list inset">
                    <li><a href="#signin" class="icon user" style="text-align:center">Login</a></li>
                    <li><a href="#signup" class="icon pencil" style="text-align:center">Register</a></li>
                </ul>
            </div>        

            <!-- Login View -->
            <div class="panel" title="Login" id="signin" data-footer="none">
                <br>
               <img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
                <div style="text-align:center">
                    <br>
                    <h3>School<br>Management System</h3>
                    <br>
                    <br>
                </div>
                <br>
                <input name="username" type="text" placeholder="username" />
                <input name="password" type="password" placeholder="password" />
                <a class="button block" href="#backpage" id="login">Login</a>
            </div>

            <!-- Register View -->
            <div class="panel" title="Register" id="signup" data-footer="none">
                <br>
                <img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
                <div style="text-align:center">
                    <br>
                    <h3>School<br>Management System</h3>
                    <br>
                    <br>
                </div>
                <br>
                <input name="name" type="text" placeholder="Name" id="name" />
                <input name="email" type="text" placeholder="Email" id="email" />
                <input name="username" type="text" placeholder="Username" id="username" />
                <input name="password" type="password" placeholder="Password" id="password" />
                <input name="password2" type="password" placeholder="Confirm Password" id="confirmpassword" />
                <a class="button block" href="#signin" id="register">Register</a>
            </div>
            
             <!-- back panel -->
            <div class="panel" title="Home" id="backpage" data-footer="none">
                <br>
                <center><h3>Hi! Welcome to School Managment System.</h3></center>
                <br>
                <ul class="list">
                    <li><a href="#student1"><img src="images/girlOne.jpg" alt="girlOne">Bella</a></li>
                    <li><a href="#student2"><img src="images/boy.jpg" alt="boys">Edward</a></li>
                    <li><a href="#student3"><img src="images/girlTwo.jpg" alt="girlTwo">Rosie</a></li>
                </ul>
            </div>
            
             <div class="panel" title="Bella" id="student1">    
                <div>
                    <br>
                    <img src="images/girlOne.jpg" alt="girlOne" style="float:left">
                    <br>
                    <br>
                    <center>
                        <h3 style=""> Name : Bella Swan</h3>
                        <br>
                        <h3 style=""> ID : 123456</h3>
                    </center>
                    <br>
                    <br>
                    <h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
                    <br>
                    <label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
                    <!--label>Date</label>
                    <input type="date" id="txtDateFrom">
                    <br>
                    <button onclick="myFunction()" style="float:right;">Submit</button-->
                    <br>
                    <br>
                    <table border="1" style="width:100%; text-align:center;">
                        <tr>
                            <td style="font-size:18px;">Check In</td>
                            <td style="font-size:18px;">Check Out</td>
                        </tr>
                        <tr>
                            <!--td><p id="demo" style="font-size:18px"></p></td>
                            <td><p id="demo1" style="font-size:18px"></p></td-->
                            <td style="font-size:18px;">6.30 a.m.</td>
                            <td style="font-size:18px;">4.30 p.m.</td>
                        </tr>
                    </table>
                 </div>
            </div>

            <div class="panel" title="Edward" id="student2">
                <div>
                    <br>
                    <img src="images/boy.jpg" alt="boys" style="float:left">
                    <br>
                    <br>
                    <center>
                        <h3 style=""> Name : Edward Swan</h3>
                        <br>
                        <h3 style=""> ID : 123466</h3>
                    </center>
                    <br>
                    <br>
                    <br>
                    <h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
                    <br>
                    <label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
                    <!--label>Date</label>
                    <input type="date" id="txtDateFrom">
                    <br>
                    <button onclick="myFunction1()" style="float:right;">Submit</button-->
                    <br>
                    <br>
                    <table border="1" style="width:100%; text-align:center;">
                        <tr>
                            <td style="font-size:18px;">Check In</td>
                            <td style="font-size:18px;">Check Out</td>
                        </tr>
                        <tr>
                            <!--td><p id="demos" style="font-size:18px"></p></td>
                            <td><p id="demos1" style="font-size:18px"></p></td-->
                            <td style="font-size:18px;">6.45 a.m.</td>
                            <td style="font-size:18px;">4.45 p.m.</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="panel" title="Rosie" id="student3">
                 <div>
                    <br>
                    <img src="images/girlTwo.jpg" alt="girlTwo" style="float:left">
                    <br>
                    <br>
                    <center>
                        <h3 style=""> Name : Rosie Swan</h3>
                        <br>
                        <h3 style=""> ID : 123476</h3>
                    </center>
                    <br>
                    <br>
                    <h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
                    <br>
                    <label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
                    <!--label>Date</label>
                    <input type="date" id="txtDateFrom">
                    <br>
                    <button onclick="myFunction2()" style="float:right;">Submit</button-->
                    <br>
                    <br>
                    <table border="1" style="width:100%; text-align:center;">
                        <tr>
                            <td style="font-size:18px;">Check In</td>
                            <td style="font-size:18px;">Check Out</td>
                        </tr>
                        <tr>
                            <!--td><p id="demoss" style="font-size:18px"></p></td>
                            <td><p id="demoss1" style="font-size:18px"></p></td-->
                            <td style="font-size:18px;">6.30 a.m.</td>
                            <td style="font-size:18px;">4.30 p.m.</td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>

    </div>

</body>
</html>
Thanks and Regards.
You can implement a unique

Elroy_A_Intel — Thu, 16 Jun 2016 17:03:04 GMT
You can implement a unique header per page as described in the following page: https://app-framework-software.intel.com/documentation.php#afui/afui_layout
Hello Mr. Elroy ,

Nabil_A_1 — Fri, 17 Jun 2016 02:39:54 GMT
Hello Mr. Elroy ,
Thanks for your help . I just make it . Thanks a lot . =)
topic You can implement a unique in Software Archive

Back button visibility

You can implement a unique

Hello Mr. Elroy ,
