Page:beforein order?

1

Hi,

I have an app that will change the color of the footer icon depending on the background color. For the most part this works well but when I don’t have a transition to the page the footer bar ‘blinks’ the dark default color before the ‘light’ style is appended to the footer.

I tried using beforein thinking that I could add the css to the footer bar before it was viable but this does not seem to be the case so I was curious what the order of the page events were and how I might be able to apply the class before the screen is shown?

Thanks.

2

Can you show relevant code of what do you have?

3

Hi Sure,

First off just to follow up with this, I actually ended up injecting CSS to the head to get this to stick but that not really important…

So the way I have things setup is a have a listing of pageinit functions looking for specific page names like so

$$(document).on('page:init', '.page[data-name="homeMain"]', function (e) {

updateHeaderFooter();
});

This builds out my header and footer on the init, however I need to make sure the icons in the footer are correct based off the color stored in a localstorage object. This works perfectly 99% of the time, however I ran into an issue that if the navigators poroperty ‘reloaddCurrent’ is set to true my buildHeader code has a flicker as the footer icon colors change from ‘black to white’ as the color correction is done.

Now I tried to place the beforein like so

$$(document).on('page:beforein', '.page[data-name="homeMain"]', function (e) {

updateHeaderFooter();
});

but the same thing happens so I was a little confused because my understanding is this would fire before the init and being shown?

anyhow thanks!

4

Still not clear where is the problem. But the order is following: init -> beforein -> afterin
Also, update F7 to latest, there were some tweaks and fixes recently for this