JS code to make custom header disappear whenever I'm not on the homepage

lucasf

Hello, everyone.

I'm new to JS and I'm struggling to implement a very-simple condition to my forum.

I have a header added through the "custom header html" option in admin preferences. I'm using a nice image in it and it worked out just fine.

However, I'd like to make it go away if the user is not on the homepage. Specifically, what I'd like to do is to change the CSS property display to none if the script detects that I'm not on the homepage.

I have tried inserting this code into the header HTML, but with no success:

When checking the console on devtools, I find the following error message: Uncaught TypeError: Cannot read properties of null (reading 'style').

What should I do, then? Thank you all in advance for the attention.

clarkwinkelmann

lucasf since Flarum is a single page app, you would have to integrate into the Mithril javascript router to know what page is currently being shown and when it changes. This requires using the Flarum javascript extension API, which is best achieved through a Flarum extension.

The easiest solution to avoid having to create a Flarum extension would probably be to design your custom header in a way that can be hidden with CSS. Depending on the page currently visible in Flarum there are various class names added to body or #app which you might be able to use as part of custom CSS to hide your content.

Another solution could be to use the Formatted Banner extension with HTML so that your HTML only gets inserted inside of the welcome slot of the homepage https://discuss.flarum.org/d/31152-formatted-banner

As for your current code, I notice 2 issues: getElementById takes the ID without # and Flarum doesn't have any page that contains homepage.aspx in its path. But if your code works it'll only handle the initial page load and not any navigation inside of the single page app.