hiding elements on just one page?

Ask the community
,
1

hi, i’ve tried existing codes on this forum to no avail, so i wanted to vent my specific struggle.

i want to hide the below elements (#image1 and #horizontalMenu1) on the page “HOME” only. everywhere else, i want them shown. i’ve tried using the page-exclusive code that’s meant to hide them for said page, but it continues to hide them everywhere else.

1868×274 634 KB

can someone advise me please? what’s the most concise way of doing this? i imagine it’s something like if page is HOME, hide #image1 and #horizontalMenu1, if else, show #image1 and #horizontalMenu1. but i just don’t know how to write it… or make it work.

any help would be really appreciated. thanks so much!

2

If it’s a global element (i.e. element that exists on all pages such as header, footer etc…) then once you hide it, it’ll remain hidden until you show it again even if you move from page to page (unless you refresh the page).
So in you case you should add to the global SITE code (the masterPage.js) :

// masterPage.js
$w.onReady(() => {
$w("#image1").show();
$w("#horizontalMenu1").show();
})

And on the home page code:

// homepage code
$w.onReady(() => {
$w("#image1").hide();
$w("#horizontalMenu1").hide();
})
3

that makes perfect sense. you’re an absolute champion, thank you so much for your help!

4

You’re welcome :slight_smile:

5

@jonatandor35 one more question if you’re able to/don’t mind helping! i’m trying to do the same with hiding a couple of elements on mobile on the homepage ( #quickActionbar1 and #menuToggle1) , but making them visible on the rest of the site. this homepage code all works:

// homepage code
$w.onReady(() => {
$w("#image1").hide();
$w("#horizontalMenu1").hide();
$w("#backToTop").hide();
})

as well as the masterpage:

// masterPage.js
$w.onReady(() => {
$w("#image1").show();
$w("#horizontalMenu1").show();
$w("#backToTop").show();
})

i’ve tried $w(“#quickActionBar1”).show(); / $w(“#menuToggle1”).show(); and hiding them on the homepage, and no luck. any other suggestions? do i have to make a nod towards it being mobile view?

6

I don’t see a reason why it won’t work the same.
But since the quickActionBar is an element that only exists in mobile mode, you should run any related code only if it’s mobile:

//maserPage.js
import wixWindow from 'wix-window';
$w.onReady(() => {
if(wixWindow.formFactor === "Mobile"){
$w("#quickActionBar1").show();
}
})

//homepage
import wixWindow from 'wix-window';
$w.onReady(() => {
if(wixWindow.formFactor === "Mobile"){
$w("#quickActionBar1").hide();
}
})

[typo fixed]

7

@jonatandor35 ah man, i don’t know what’s going wrong, but it’s not working :frowning: thanks for your help anyway!