Issue with .hide() function

Ask the community
,
1

Hello,

I’m trying to use the .hide function to hide the header, footer and a pinned element on one specific page. However when using the code:

$w(“#header1”).hide();

on that page I get an error stating ‘hide’ does not exist on ‘header1’

If i use the same code on any element on the page that’s not the header, footer or the pinned element it works just fine. Does anyone know how I can fix the code or use another method to hide the header, footer and pinned element on one specific page?

2

Header cannot be hidden (or shown) using Corvid code.
You need to define in the page settings (on the editor) whether or not to display header&footer.

3

That’s the problem. I’m using the wix events app. The page on which the events strip is initially shown has a hidden header and footer via the page settings. However when clicking the register link and going to the subsequent pages of the events app the header and footer show up again. Those subsequent pages don’t show up in the pages menu and I cannot edit their settings. Is there any workaround for this? If I can’t hide the header and footer is it possible to add code that masks them somehow?

4

@arturakhmetov Actually I’m not familiar with the event app and can’t tell you (maybe someone else can), have you tried to put a white strip over the header?

5

@jonatandor35 Yup, what happens is that in order to place a strip directly over the header or footer I have to attach the strip to the header or footer, at which point it applies the change to every page. Same with other elements like shapes.

6

First of all that’s not correct, you can put a strip over it without attaching. Just make it a little bit larger then the header.

also you can use code to hide the header contents, (and to show it again when you are out of this page.
In the SITE panel (not the page panel:

import wixLocation from 'wix-location';
let path = wixLocation.path;
const headerElements = ["logo", "searchIcon"];//put the property names of the elements;
$w.onReady(() => {
if (path.includes("event-details")){
    headerElements.forEach(e => $w(`#${e}`).collapse());
} else {
    headerElements.forEach(e => $w(`#${e}`).expand());
}
})

[updated]

7

@jonatandor35 Got it. I just tried hiding specific elements rather than the entire header right before I read your post. It worked. Thanks for your time, much appreciated.

8

@arturakhmetov but make sure you show them again by code when you get out of the page, otherwise they will remain hidden.

9

@jonatandor35 Cool, will do.