Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

Dear Appery,

I'm following this supposed to work example to show a splash screen while web app is loading, currently, while the app loads i see the notorious white screen who i want to be replaced with the splash screen however i cant seems to make it show, i've added this code to both index.html and the startScreen.html (since its all voodoo right now :)):

Image

(BTW - i only used the iPhone5 code part for my personal POC.)

what am i missing here? is it me or something to do with the Appery platform?

Hope you'll be able to help me figure this out!

As always, many thanks in advance!!
Best,
R.

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

Thx Katya for your reply.

I tried your suggestion and it doesnt do the trick, the image load AFTER the app loads so in fact the white screen is visible for the whole loading time which takes a few good seconds... let me remind you that this is a web app.

here are two working examples that can be tested in the mobile safari for a splash screen while the web app is loading:

with splash image

without splash image

both examples are from this tutorial

i'm finding it a bit confusing to implement the above working solution within Appery, hope you'll find the time to help me out with it...

UPDATE
this is the CSS part that shows the splash screen:
code
.splash {
height: 99.9%;
overflow: hidden;
}
.splash:before {
background: none no-repeat scroll center center #FFFFFF;
bottom: 0;
color: #BBBBBB;
content: "Loading...&quot
display: block;
font-family: Arial;
font-size: 1.5em;
height: 115%;
left: 0;
line-height: 150px;
min-height: 600px;
position: absolute;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
vertical-align: bottom;
width: 100%;
z-index: 999999;
}
/code

i tried to add it to every CSS file in the project but still no joy...

TIA!
Best,
R.

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

okay, got it to work, no need for your help on this.
Thx anyways.
R.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

web app splash screen doesnt show

Hi Ram,

Thank you for the update!
Just in case somebody looks for this - there is no need to add code to each CSS file. You can add to an only custom file that will be used for every page.

You can also try the following approach: https://getsatisfaction.com/apperyio/...

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

Thx Katya, the link you provided didn't solve for me the white page while the project loads, here's what i did to solve it if anyone else need it:

i added the following CSS to the head of INDEX.HTML page:

code
<style media="screen" type="text&#47;css">

&#46;splash {
height: 99&#46;9%;
overflow: hidden;
}
&#46;splash:before {
background: none no-repeat scroll center center #000000;
bottom: 0;
color: #BBBBBB;
content: "Please Wait, Loading&#46;&#46;&#46;&quot
display: block;
font-family: Arial;
font-size: 1&#46;5em;
height: 115%;
left: 0;
line-height: 150px;
min-height: 600px;
position: absolute;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
vertical-align: bottom;
width: 100%;
z-index: 999999;
}

<&#47;style>
/code

next, added the class splash to the body of the index.html:
code
<body class="splash"><&#47;body>
/code

here's a quick video on how it looks in action

enjoy!

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

BTW - in the above movie clip i wrote that you need to remove the CSS on pageShow event, this isnt the case, you can use it only as i described.

and if you do want to remove it the you can do it like this on pageShow:

code
document&#46;body&#46;className = document&#46;body&#46;className&#46;replace("splash","");
/code

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

web app splash screen doesnt show

Hello Ram! Thank you for sharing!

Benny Halperin
Posts: 0
Joined: Wed Oct 02, 2013 8:13 am

web app splash screen doesnt show

Hi Ram,

Thanks, I am having the same problem exactly. I did the following as per your advice:

  • added the CSS classes you provided (for testing they are identical, later will change to my own splash styling)

  • added $("body").addClass("splash") to startScreen Load event handler.

    Questions:

  • Can't see the movie (taken to Dropbox site, but clip does not show - spinner keeps spinning...)

  • When you say you add this CSS to index.html do you mean actually startScreen.html? Do you edit the html directly? I want to do everything in Appery's editor and keep the html file untouched.

  • If I do not remove the class splash, the splash remains visible. How else do I hide the splash? I guess the answer is in the clip that I can't see...

  • Can you see the splash working as expected in the browser? (by clicking Test in Appery's IDE)

    TIA,
    Benny

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

web app splash screen doesnt show

@Benny

  1. have no idea why you dont see the clip... just checked and it is there publicly to all... https://www.dropbox.com/s/d5vbid8c6mk...

  2. yes i did edit the index.html file itself however it is done within Appery (btw, you must add the splash css to the index.html file that in his turn loads the startScreen)
    Image

  3. on page show event add the JS to remove the css part from the page:
    code
    document&#46;body&#46;className = document&#46;body&#46;className&#46;replace("splash","");
    /code

  4. the splash screen is visible as expected in both Appery's test IDE and also on the safari mobile - HOWEVER - it doesnt support css animation in safari mobile, i'm still trying to solve this but no luck yet... so to summarized it all:

    you can add an image and text to your Index.html file to be shown while your JQM project is loading.

    hope it helps you.
    Best,
    R.

Return to “Issues”