Monaca Onsen UI Discord Chat Github Repo


  • @munsterlander

    I used the contact form, with a dropbox link

  • @james_d Oh! Right-o! I’m goofy. :smiley:

    I haven’t reviewed your code, but I did this below and have it working great on the device. I will take a look at your code here shortly:

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link href=',300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
        <title>Onsen UI Forum Help by Munsterlander</title>
        <script src="components/loader.js"></script>
        <script src="lib/onsenui/js/onsenui.js"></script>
        <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
        ons.ready(function() {   
            if (localStorage.getItem("walkThroughPage") === null) {
               myNav.pushPage('pg1', {animation : 'slide'});
            } else if (localStorage.getItem("walkThroughPage")!='complete'){
               myNav.pushPage(localStorage.getItem("walkThroughPage"), {animation:  'slide'});
            document.addEventListener("show", function(event){
               if (localStorage.getItem("walkThroughPage")!='complete'){
        <ons-navigator id="myNav">
                <h4>My Home Page</h4>
                    My actual app always goes here
                <ons-button onclick="localStorage.removeItem('walkThroughPage');">Reset App</ons-button> 
        <ons-template id="pg1">
            <h4>First page of walkthrough</h4>
            <ons-button onclick="myNav.replacePage('pg2');localStorage.setItem('walkThroughPage','pg2');">Go to Page 2</ons-button>
        <ons-template id="pg2">
            <h4>Second page of walkthrough</h4>
            <ons-button onclick="myNav.replacePage('pg3');localStorage.setItem('walkThroughPage','pg3');">Go to Page 3</ons-button>
        <ons-template id="pg3">
            <h4>Final page of walkthrough</h4>
            <ons-button onclick="myNav.popPage();localStorage.setItem('walkThroughPage','complete');">Go to App</ons-button>

  • @james_d After reviewing your code, I think that if you implement the events I have on my buttons, you will see what you are hoping for. The only issue, is I am replacing the page to prevent back button issues and keep the stack only 1 page deep, so with your back buttons, you are going to have to push the previous page. I would really recommend using replacePage for this this application though.

    The easiest way to explain it, is the navigation stack is like a deck of cards. Your main app page is the bottom card. For this application, I would never want more than one card on top of it. It keeps it light and makes it easy to get to the app. Plus it prevents unneeded views being in the way on app reload.

    Hope this helps and let me know through here if there are any issues.

  • @munsterlander the sample code you provided will throw an error because
    if (localStorage.getItem(“walkThroughPage”) === null) {
    ** myNav.**pushPage(‘pg1’, {animation : ‘slide’});
    myNav will be undefined, which you basically defined later in the code i-e
    <ons-navigator id=“myNav”>
    So how can somebody use a variable when it is not even defined?

  • @Husnain-Tahir The full code I provided was a working example. You can copy it into a new project and run it successfully. To answer your question regarding if the element is attached to the DOM, you will notice that the section of code you reference is wrapped in ons.ready() function. This insures the code is not executed until all elements are initialized and attached to the DOM. I have also posted other ways of doing this as well using event listeners and such.

  • @munsterlander oh sorry i forgot to mention ons.ready();, yeah that code will definitely execute, but thing is that i we have more than 1500 lines of code in a single file, it will take a while for ons.ready() to fire, and when it fires it will show the walkthrough may be even for a moment, but it will definitely show it.

  • @Husnain-Tahir So is the problem with the file size resulting in a long load time or that so many items are being attached to the DOM that the pushPage takes too long to execute?

  • @munsterlander the problem is that so many items are being attached to the DOM.

  • @Husnain-Tahir Sorry for taking so long to get back to you. If you have that many lines and that many items attaching to the DOM, then you are probably exceeding the memory of the device and that is why you are experiencing some issues.

    It would seem to me, that you might want to reconsider the UI of the app and possibly utilize a different template system, navigators, and/or pages to introduce the information. Is there a reason that so many items need to be attached at one time?

  • The post maybe is a bit old and you may have found a solution but i thought i would drop my answer since i developed an application with the very same idea (one time walk through screens etc.) recently.

    The way you propose is too complex! You can create one page that holds a carousel with the slides you want to have in your walk through and when done (either by pressing a button or reaching the end of walk through), use the resetToPage function (in order to force navigator to clear the page stack and make root page your main page. That way pressing the back button will not go through the tutorial page). Navigate to your root page that you want and store in localStorage a value, in order to read when your app opens, to know if it’s the first time or not.



    <ons-page id="walkthroughpage.html">
        <ons-carousel swipeable auto-scroll fullscreen var="tutorialslider" >
            <ons-carousel-item style="background-color: #607D8B;">
               TUTORIAL PAGE 1 (FILL WITH IMAGES etc.)
            <ons-carousel-item style="background-color: #607D8B;">
            <ons-carousel-item style="background-color: #607D8B;">
               TUTORIAL PAGE 3 (...)
                <ons-button class="cover-skip" ng-click="doneWalkthrough()" modifier="quiet">
                <div class="cover-label">
                    <span class="indicators"> <ons-icon icon="md-circle" size="5px"></ons-icon> </span>
                    <span class="indicators"> <ons-icon icon="md-circle" size="5px"></ons-icon> </span>
                    <span class="indicators"> <ons-icon icon="md-circle" size="5px"></ons-icon> </span>
                    <span class="indicators"> <ons-icon icon="md-circle" size="5px"></ons-icon> </span>
                    <span class="indicators"> <ons-icon icon="md-circle" size="5px"></ons-icon> </span>

    In your controller

       $scope.doneWalkthrough= function(){

    And when your app opens you can check if you should show your walkthrough page or not like this:

    /*will be false the very first time a user opens the app because no key 'opened_once' will be found in localStorage. When the walk through page completes then it will become true (which means that it's not the first time the user opened the app*/
    var firstime = window.localStorage.getItem("opened_once") || false;  

    Hope it helps

  • @jcdenton Excellent demo and a simple way to implement a walk-through. There was one additional requirement though, remember where the user left off in the walk-through if they depart the app and come back. With a tweak, I would believe you could accomplish that pretty quickly. Excellent write up!

  • @munsterlander

    Yes you are right.

    Keeping where the user left off could be done by keeping the current index of the carousel each time a change (slide) occurs.

    Then, if the app should show the walkthrough page, it should do one more check to see if there is any index already set in localStorage. If yes then start the carousel on that index otherwise from the first.