Way to hide Knack default header faster?

API & Customization Ask Developers
1

We have a page that is unlocked for the public but the URL is only sent specifically to the person who we want to see it. I am hiding our app header by binding CSS, but on a slow connection it still flashes before my JS runs. Is there a faster way to do this?
Example is this URL https://lombardo.knack.com/dirt#printpo/po-printable/66031b64e6225a0027ad1c2a/

and this the is JS that runs AFTER the page is loaded:

function bindToUpdate1(scene_120){
$(document).on(‘knack-page-render. scene_120’ , function(event, page) {
$(‘#kn-app-header’).css(‘display’,‘none’);
$(‘.kn-crumbtrail’).css(‘display’,‘none’);
$(‘.kn-back-link’).css(‘display’,‘none’);
$(‘.kn-print’).css(‘background-color’,‘green’);
$(‘.kn-print’).css(‘border-radius’,‘5px’);
$(‘.kn-print’).css(‘margin-top’,‘20px’);
$(‘.kn-print’).css(‘margin-bottom’,‘20px’);
$(‘.kn-print’).css(‘line-height’,‘30px’);
$(‘.kn-print a’).css(‘margin-left’,‘5px’);
$(‘.kn-print a’).css(‘margin-right’,‘5px’);
$(‘.kn-print a’).css(‘color’,‘white’);
$(‘#kn-scene_120’).css(‘margin’,‘10px’);
});
}

2

Hey Robin,

You don’t actually need JS in order to hide the app header. Instead, just add the following CSS which will take effect sooner than the JS:

#kn-app-header {
  display: none;
}
3

I just noticed that you are wanting to hide it for specific pages. In that case, you can use this combination of JS and CSS to achieve this:

CSS

#kn-app-header,
.kn-info-bar {
  display: none !important;
}
.kn-content.show-header :is(#kn-app-header, .kn-info-bar) {
  display: block !important;
}

JS

const PUBLIC_PAGES = ["scene_120", "scene_218", "scene_340"];
$(document).on('knack-scene-render.any', (_e, scene) => {
  const isPublicPage = PUBLIC_PAGES.includes(scene.key);
  document.querySelector('.kn-content').classList.toggle('show-header', !isPublicPage);
});
4

Thank you, that was the idea I was looking for… turn all headers off and then turn all private page headers back on. This may hide it a bit faster than the way I was doing it. Unfortunately, the header still flashes if on a slow connection because my JS and CSS doesn’t run until after the page has loaded. But if CSS runs before JS, then starting there at least is an improvement.

5

Hi, you are having the flashing issue as you are waiting for the page to load before applying the JS, and it needs to be done at the rendering point by hiding the header after the scene is rendered. This will effectively prevent it from flashing on the screen before the JS executes, ensuring that the hiding action is targeted and occurs at the right moment.

Also, it is not efficient to hide all headers and show the ones you want; it should be the other way around, ensuring that the header is hidden only when the relevant scene is rendered, minimizing unnecessary hiding of elements.

$(document).on('knack-scene-render.scene_XXXX', function(event, scene) {
  $('#kn-app-header').hide();
})