"FOUC" on Windows Phone

chenghong commented 10 years ago

I have the following, which I expect the page will become "restified" before the alert is shown. Unfortunately that is not the case on Windows Phone 8 (default IE browser). The page transforms to mobile view only after clicking on OK.

    $( function() { 
        $('body').restive({
            breakpoints: ['10000'],
            classes: ['nb'],
            turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait'
        });
        alert('XXX');
    });

obihill commented 10 years ago

Hi Chenghong,

Because JavaScript execution is asynchronous, you'll get the alert before Restive.js is initialized. However, Restive.js has a lot of callbacks that you can use, and one of them is onReady.

onReady will fire when Restive.js is initialized. See sample code below:

$( function() { 
        $('body').restive({
            breakpoints: ['10000'],
            classes: ['nb'],
            turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait',
            onReady: function(){alert('XXX');}
        });
});

Let me know if this does it for you.

chenghong commented 10 years ago

Using onReady, below are the results:

IE on WP8: Alert showed on top of a blank page, after dismissing Alert the restified page is shown. Chrome on Android 4.4: Alert showed on top of a non-restified page, after dismissing Alert the restified page is shown.

In other words, it doesn't really work.

obihill commented 10 years ago

So basically, you want to display an alert after the page is 'restified' as you put it i.e. after the classes have been added to the <body> tag?!

In that case, you can use the onAddClass callback like so:

$( function() { 
        $('body').restive({
            breakpoints: ['10000'],
            classes: ['nb'],
            turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait',
            onAddClass: function(){alert('XXX');}
        });
});

This way, the alert will fire after the classes have been added to the DOM.

However, it will fire anytime classes are added e.g. if you change orientation [from portrait to landscape maybe] and turbo_classes has an orientation condition set e.g. is_landscape=landscape, and landscape class is added, then callback will fire. So to prevent this and have it fire only once, you can implement code as you have below.

var elem_body = $('body');
elem_body.restive({
    breakpoints: ['10000'],
    classes: ['nb'],
    turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait',
    onAddClass: function(){
        switch(true)
        {
            case (!elem_body.data('init_status')):
                alert('XXX');
                break;
        }
        elem_body.data('init_status', true);
    }
});

I've tested this and it works fine from my end. Do let me know if it does the job for you.

chenghong commented 10 years ago

Thanks, this works perfectly!

obihill / restive.js

"FOUC" on Windows Phone #2