skip main page at startup

skip main page at startup

Hi at all i  try to skip main page at startup to load another page, like a tutorial must be show once only ,

but i can't show another page ..only the main page.. i try to insert in app.js

$.afui.loadContent("#pagina1",false,false,"up");

i use framework 7 ..  but not work.. help me to understand how intel xdk choose the main page to show :)
Regards

9 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hi Daniele,

I tried this in a F7 project and it works:

1. In app.js create this function:

function showTutorial(){
	activate_page("#pagina1");
}

2. In index.html, look for <body> tag and modify it like this:

<body onload="showTutorial();">

 

You should add to showTutorial function the code needed to show pagina1 only once. I tested this also, if you place

return false;

In the function, the main page is displayed.

Hope it is clear.

Regards

Diego

Dear Diego i do this

i add in empty... app.js

function showTutorial(){

	    activate_page("#pagina1");

	}

then change <body> tag to <body onload="showTutorial();">

but my pagina1 can't show in emulator ... when i mistake'? i need to add plugin?have three default plugin

i need to add one?

Hi Daniele,

Take a look into your index.html head section to see if this script is included:

<script type="application/javascript" src="xdk/ad/fw7_subpage.js"></script>

XDK add this line it automatically when you add events to controls. If not, add it between jquery.min.js and framework7.min.js. It is where are defined activate_page and activate_subpage functions. I think it this may be the problem.

Let me know how it goes.

Regards

Diego

Diego i check but i not see this line... and i search fw7_subpage.js

but can't find this file ... in my project

You are right, I've created a new blank F7 project and the file is missing.

It is added by XDK when you select for a button in INTERACTIVITY panel the action to display a page or subpage.

So, you may drop a button, and select in its action to show any page. Then you can delete de button and the correspondent event at index_user_scripts.js

Regards

Diego

 

ok now i have script file and

code..automatic added by intel xdk !!!

. but not function can't show .. page i want to show up :) and now?

Best Reply

Hi Daniele,

I did it again in my fresh F7 project and work flawlessy. Two pages, mainpage and second with a header "Tutorial". When running, the second page is displayed.

Here is my index.html, the only manual change is on <body> tag:

<!DOCTYPE html>
<html>
    <!--
  * Please see the included README.md file for license terms and conditions.
  -->

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="framework7/css/framework7.ios.min.css">
        <link rel="stylesheet" type="text/css" href="framework7/css/framework7.ios.colors.min.css">
        <title>Blank App Designer Packaged Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">


        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
            /* following three (cascaded) are equivalent to above three meta viewport statements */
            /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
            /* see http://dev.w3.org/csswg/css-device-adapt/ */
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="framework7/js/framework7.min.js"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>
        <script type="application/javascript" src="xdk/ad/fw7_subpage.js"></script>
    </head>

    <body onload="showTutorial();">

        <div class="uwrap views">
            <div class="upage vertical-col left view-main view" id="mainpage">
                <div class="pages">

                    <div class="page navbar-fixed">
                        <div class="navbar inner-element uib_w_3" data-uib="framework7/header" data-ver="0">
                            <div class="navbar-inner">
                                <div class="left">
                                    <div class="widget-container content-area horiz-area wrapping-col"></div>
                                </div>
                                <div class="center labeltext">Main Page</div>
                                <div class="right">
                                    <div class="widget-container content-area horiz-area wrapping-col"></div>
                                </div>
                            </div>
                        </div>
                        <div class="page-content upage-content content-area" id="page_11_83">

                        </div>
                    </div>

                </div>
            </div>
            <div class="upage vertical-col left hidden view" id="uib_page_1">
                <div class="pages">

                    <div class="page navbar-fixed">
                        <div class="navbar inner-element uib_w_2" data-uib="framework7/header" data-ver="0">
                            <div class="navbar-inner">
                                <div class="left">
                                    <div class="widget-container content-area horiz-area wrapping-col"></div>
                                </div>
                                <div class="center labeltext">Tutorial</div>
                                <div class="right">
                                    <div class="widget-container content-area horiz-area wrapping-col"></div>
                                </div>
                            </div>
                        </div>
                        <div class="page-content upage-content content-area" id="page_80_73"></div>
                    </div>

                </div>
            </div>
        </div>
        <script type="application/javascript" src="framework7/my-app.js"></script>
    </body>

</html>

And the only code in app.js is:

function showTutorial(){
		activate_page("#uib_page_1")
}

 

Did you see the debug for error messages?

Regards

Diego

check pm :)

Leave a Comment

Please sign in to add a comment. Not a member? Join today