Software Archive
Read-only legacy content
Announcements
FPGA community forums and blogs have moved to the Altera Community. Existing Intel Community members can sign in with their current credentials.
17060 Discussions

Back button visibility

Nabil_A_1
Beginner
‎06-14-2016 06:43 PM
734 Views

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. 

0 Kudos

Link Copied

2 Replies
Elroy_A_Intel
Employee
‎06-16-2016 10:03 AM
734 Views

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

0 Kudos
Copy link
Nabil_A_1
Beginner
‎06-16-2016 07:39 PM
734 Views

Hello Mr. Elroy , 

Thanks for your help . I just make it . Thanks a lot . =)

0 Kudos
Copy link
Reply

Community support is provided Monday to Friday. Other contact methods are available here.

Intel does not verify all solutions, including but not limited to any file transfers that may appear in this community. Accordingly, Intel disclaims all express and implied warranties, including without limitation, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement, as well as any warranty arising from course of performance, course of dealing, or usage in trade.

For more complete information about compiler optimizations, see our Optimization Notice.