Weird, starting the app, any button needs 3 clicks to begin...

Armando_R_ · ‎07-29-2015

Hi:

I have developed a news-feed app. The app decodes rss info and makes use of media twitter accounts (not logged, making use of inappbrowser) to feed the user with news. It also makes use of geolocation to show google traffic maps, radio and tv stations live by ip are also present. I have also installed admob plugin (com.google.cordova.admob), no issues. For UI i'm using Bootstrap. And finally, besides index.html, i coded several html pages for rss news summary, all of them to be accessed using inappbrowser .

The problem is this. Starting the app, any button from the main screen needs three clicks to let the user makes use of the app (it appears to be unresponsive). No matter which button, even the navbar button on top of the screen. After the 3 clicks, the app behaves normally, everything works fine, no problem at all and is quite stable the execution. I have been testing the app with/without differents parts of code, such as the admob plugin, js code to manage radio/tv, etc. And still having the same behavior.

I tend to think i'm missing something needed to initialize the app in the right way. Cordova CLI version is 4.1.2.

Any help would be greatly appreciated, thanks!

Armando_R_ · ‎07-29-2015

Updating.... Checking again, i noticed that pressing 3 times any part of the screen (not necessarily a button), the app "wakes up". Does splashscreen have something to do? Might be splashscreen is not shutting down properly?

John_H_Intel2 · ‎07-30-2015

It would be helpful if you could supply a simplified version of your app that demonstrates the problem. Without that, we would only be guessing at what the issue could be.

PS. I have not seen/heard of this before.

Pamela_H_Intel · ‎07-30-2015

Is your splash screen transparent? And maybe hasn't gone away yet? Or is it definitely 3 clicks no matter how much time lags between click 1 and click 3?

Armando_R_ · ‎07-30-2015

Hi:

John and Pamela, thank you for your interest.

After my last update, i tried something else. Starting the app, and after appearing the icon of the splashscreen, i waited a while before starting to use the screen. After several trials i noticed that the min time the app needed to be responsive was 15 seconds. After 15 seconds no more clickings were needed. Everything runs normal.

After reading your replies and some info about the splashscreen i tried something else. I used navigator.splashscreen.hide() in a function to be executed when the page was loaded:

function quitSplashScr(){
navigator.splashscreen.hide();
}

</script>

</body>

And it worked to some degree. The app now only spends 5 seconds to be responsive, which is a great improvement.

But i don't know if there is something else to do. As a note of interest i want to point out that the splashscreen sometimes superpose for a while on the main menu (starting the app), sometimes don't and the main menu is responsive almost immediately.

The code for just one button of the main menu (there are 16 in total) and its main functionality with its page (Medios) goes next:

<body onload="quitSplashScr()">
        
        
        
        <div class="upage" id="mainpage">
            <div class="upage-outer">
                <div class="upage-content ac0 content-area vertical-col" id="page_19_93">
                    <div role="navigation" class="navbar navbar-default full-width-widget widget uib_w_2 d-margins" data-uib="twitter%20bootstrap/navbar" data-ver="1" id="NavBar">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-0"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button><a class="navbar-brand" href="#">NiusMx</a>
                        <div id="bs-navbar-0" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                                <div class="btn-group uib-bs-flex widget uib_w_3 d-margins" data-uib="twitter%20bootstrap/button_group" data-ver="1">
                                    <button class="btn widget uib_w_4 btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1" id="mediosB"><i class="glyphicon glyphicon-th-list button-icon-top" data-position="top"></i>Medios</button>
                                </div><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>

<div id="Medios" class="upage-content vertical-col hidden">
                    <div role="navigation" class="navbar navbar-default full-width-widget widget uib_w_25 d-margins" data-uib="twitter%20bootstrap/navbar" data-ver="1" id="NavBarMedios">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-3"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button><a class="navbar-brand" href="#">NiusMx</a>
                        <div id="bs-navbar-3" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
                        <div class="col uib_col_7 col-0_12-12" data-uib="layout/col" data-ver="0">
                            <div class="widget-container content-area vertical-col">

                                <button class="btn widget uib_w_26 d-margins btn-lg btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1" id="rotmedB"><i class="glyphicon glyphicon-list button-icon-left" data-position="left"></i>Medios</button><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>

                                <div class="table-thing widget uib_w_27 d-margins" data-uib="twitter%20bootstrap/select" data-ver="1">
                                    <label class="narrow-control label-inline">Canal</label>
                                    <select class="wide-control form-control default input-lg" id="twmed_ChannelList">
                                        <option value="" disable="" selected="">-- Selecciona --</option>
                                        <option value="googlenewsmx">Google News México</option>
                                        <option value="el_universal_mx">El Universal</option>
                                        <option value="milenio">Milenio</option>
                                        <option value="lajornadaonline">La Jornada Online</option>
                                        <option value="lajornada">La Jornada Impresa</option>
                                        <option value="excelsior">Excélsior</option>
                                        <option value="revistaproceso">Proceso</option>
                                        <option value="elfinanciero_mx">El Financiero</option>
                                        <option value="forbes_mexico">Forbes México</option>
                                        <option value="aristeguionline">Aristegui Online</option>
                                        <option value="sdpnoticias">SDP Noticias</option>
                                        <option value="cnnmex">CNN México</option>
                                        <option value="quadratinmexico">Quadratín México</option>
                                        <option value="ntelevisa_com">Noticieros Televisa</option>
                                        <option value="aztecanoticias">Azteca Noticias</option>
                                        <option value="cadenatres_mx">Cadena Tres</option>
                                        <option value="reformacom">Reforma</option>
                                        <option value="emeequis">Revista Emeequis</option>
                                        <option value="estoenlinea">Esto</option>
                                        <option value="yahoonoticias">Yahoo Noticias</option>
                                        <option value="20mmexico">20 Minutos México</option>
                                        <option value="prodigymsn">Prodigy MSN</option>
                                    </select>
                                </div><span class="uib_shim"></span>
                            </div>
                        </div>
                        <span class="uib_shim"></span>
                    </div>
                     <script>
            //Seleccion de canal Tw Medios disparado por evento
            function show_selectedtwmed() {
                var selector = document.getElementById("twmed_ChannelList");
                var new_channel = selector[selector.selectedIndex].value;
                window.open("https://mobile.twitter.com/" + new_channel,"_blank","toolbar=yes");

            }

document.getElementById("twmed_ChannelList").addEventListener("change",show_selectedtwmed);

function quitSplashScr(){
navigator.splashscreen.hide();
}</script>

</body>

I appreciate your help and interest very much, thank you again!

Pamela_H_Intel · ‎07-30-2015

@Armando - 5 seconds is not horrible for app loading time. But the superimposing of the splash screen is strange.

Though not an optimal solution, you might try playing with the splash screen duration. See Paul's comment in the following forum topic regarding hide vs. duration: https://software.intel.com/en-us/forums/topic/563475#comment-1833155

John_H_Intel2 · ‎07-31-2015

Here is your problem:

function quitSplashScr(){
navigator.splashscreen.hide();
}

</script>

</body>

You are calling the splashscreen.hide function on the onload of the body tag. This is not the correct place to call it. You need to wait until ondeviceready fires.

Create a blank app from the samples we provide and check the code out for how to start coding an app.