Page:beforein order?


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?


Can you show relevant code of what do you have?

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) {


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) {


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!

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