Simple splash screen with existing F7

1

I wanted a splash screen on my opening page but didn’t like the various options shown in a Google search.
Instead I figured out a way to use a Panel from F7. My opening page does not use the left panel so I decided this would make a splash screen.
First add some styling to make it full width:
>

.panel-left{
width: 100%;
position: relative;
}

Then open the panel on load with a function call in the body tag

The function opens the (full width) splash screen and sets a session cookie to ensure it is only once per session (if you want once ever you just need to change the cookie type):

function showSplash () {
splashDone = sessionStorage.getItem(‘splashDoneCookie’);
if (splashDone != ‘1’) {
var x = app.panel.open(‘left’);
sessionStorage.setItem(‘splashDoneCookie’, ‘1’);
}
}

The panel content can contain any HTML you wish.
I hope someone finds this useful…

1 Like