This is a migrated thread and some comments may be shown as answers.

Rearrange on PageLoad with IPad (Safari?)

7 Answers 433 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 21 May 2012, 11:24 AM
Congratulations to your Products.

When I start your demos or my test-projects there is a short rearranging of the page on Ipad. 
At the first moment, I can see the plain html output of the page and then some milliseconds later the kendouimobile-design.

There is no such ugly behavior on other browsers I tested (Android stock browser, IE and Chrome on PC)

Is there a solution against this behavior?

Thank you

Stefan

7 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 21 May 2012, 11:53 AM
Hello Stefan,

To avoid the FOUC (Flash Of Unstyled Content) you can set visibility: hidden on the first view and remove it after you initialize the application. Something like this:
<body>
    <div data-role="view" data-title="Kendo Mobile App" id="firstView">
        <script>
            $("#firstView").css("visibility", "hidden");
        </script>
        ...
    </div>
    <script>
        var mobileApplication = new kendo.mobile.Application($(document.body));
        $("#firstView").css("visibility", "visible");
    </script>
</body>


Another way is the use of a splash or loading screen in a similar manner.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stefan
Top achievements
Rank 1
answered on 21 May 2012, 02:17 PM
Hey Kamen

Thank you for your quick answer!

FOUC - great name! Now I know how to google for this behavior...

unfortunately the problem is still there - A "MainElement".show() right after the Application.init is still to early... only a ugly

function KUIMStart()
{
    window.kendoMobileApplication = new kendo.mobile.Application($(document.body));
    setTimeout("KUIMStart2();", 200);
}
function KUIMStart2()
{
    $("#MainContent").css("visibility", "visible");
}

works... this is ok for the first step in our project.

I will later check the points in http://www.kendoui.com/forums/ui/general-discussions/how-to-fix-the-foucing-menu.aspx too.

Thank you.
0
Joon
Top achievements
Rank 1
answered on 20 Jun 2012, 11:37 AM
Here's how I solved the issue, hope it helps you.

Right after the body, I've inserted the hidden thing,,
<body>
    <script>
        //initially hiding the body so that the ugly body before the css rendering doesn't show up for users
        //body visibility set back to 'visible' on the data-show method of the first view, home.
        $(document.body).css("visibility", "hidden");
    </script>

and then in the data-show method of the initial view, I set it back to visible. something like this,,
<div data-role="view" id="home" data-title="Home" data-show="home_onShow" data-layout="mainLayout">
...
...
        function home_onShow(args) {
            //setting the hidden(above, just after the body tag) css visibility back to visible
            $(document.body).css("visibility", "visible");
        };
0
Duredhel
Top achievements
Rank 1
answered on 21 Aug 2012, 10:19 PM
Conratz to your product as well.

Kamen you said that you can fix this with the use of a splash screen. How can you do that? So you can have a screen which it will be displayed for 1-2 seconds during the load?

I tried this guide: http://simonmacdonald.blogspot.co.uk/2012/04/phonegap-android-splashscreen-just-got.html  but I can't make it work.
0
N Mackay
Top achievements
Rank 1
answered on 25 Oct 2012, 03:35 PM
Joon's suggestion worked a treat for me.

Nice and slick now on Android 2.3.5 & 4 and iOS.

Glad I chose Kendo, Now the 1st app in is UAT it's been seen by management and project backers who are very happy with the feature and especially in iOS think it's just a native app.

Keep up the good work, Kendo has great potential.


0
Troy
Top achievements
Rank 1
answered on 16 Dec 2012, 07:45 AM
I'm using kendo for mobile, and do all scripting after the contents of my body. I was still seeing flashes of un-rendered content from various views on my page. I ended up using CSS and applying the following rule within my <head></head>:

[data-role="content"]
{
visibility: hidden;
}

Since Kendo automatically injects a <div data-role="content"> wrapper around the entire contents of each view, I figured I would just go ahead and manually add this wrapper directly after each <div data-role="view"> on my page. Now the contents of all my views are hidden. I then add a function on my initial view's data-init that does the following:

function initMyView(e) {
$('[data-role="content"]').css('visibility', 'visibile');
}

This now makes the contents WITHIN every view visible, but, of course, will not actually be displayed until its respective view is being shown. Further, I was then able to add a preloader, using CSS, at the beginning of the body and outside of the views (so it would stay visible), where I just removed it in the same function as shown above.

Hope this helps,
Troy
0
Keen
Top achievements
Rank 1
answered on 05 Apr 2013, 02:12 AM
Can I have code for this guys?
Im currently working a sample project. with a image in loading a fade after 2-3 seconds
Using Icenium with Kendo Ui mobile
Tags
General Discussions
Asked by
Stefan
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Stefan
Top achievements
Rank 1
Joon
Top achievements
Rank 1
Duredhel
Top achievements
Rank 1
N Mackay
Top achievements
Rank 1
Troy
Top achievements
Rank 1
Keen
Top achievements
Rank 1
Share this question
or