How to make CSS take effect on a page template before it's pushed?
-
I have a page template with toolbar that should have a background color set before it visually appears on screen, but it’s currently appearing with a default white background then very quickly changing to the correct color. Is it possible to get it to be the correct color before it appears so I don’t see the white flash first?
Template:
<template id="devpage"> <ons-page id="devpage-inner"> <ons-toolbar id="devtoolbar"> <div class="left" id="devbackbtndiv" style="color: #ffffff"><ons-back-button id="backbtndev">Back</ons-back-button></div> <div class="center" id="cmbtitle" style="color: #ffffff"></div> </ons-toolbar> <div id="cmbcontent"> </div> </ons-page> </template>
Code:
mainnav.pushPage('devpage').then(function() { // Change title bar colour to dynamically calculated color: $('#devtoolbar').css('background', #dynamic color calculation here); etc....
I tried putting the color change before the above mainnav.pushPage() statement, but that didn’t work because it’s a template.
mainnav is in a splitter:
<ons-splitter> <ons-splitter-side id="sidemenu" side="left" width="220px" collapse swipeable> Some menu items here </ons-splitter-side> <ons-splitter-content id="menucontent"> <ons-navigator id="mainnav" page="initialpage"></ons-navigator> </ons-splitter-content> </ons-splitter>
Thanks for any suggestions
-
You can try listening for the page’s init event.
See here for more details of a case where a user had the same flickering problem:
https://community.onsen.io/topic/3568/page-beforeshow-event
-
@emccorson Yes that fixed it, perfect thanks very much!