How do I get an element to show on a specific page and hide on all others?

Ask the community
,
1

Hey all,
I’m new to coding and am getting stuck here.

I’m trying to accomplish having a “bar” appear under the page I am on. I am creating a custom menu using buttons and when you hover over them the drop-down nav menu appears.

I’m getting stuck getting the bar to disappear on all other pages. I can get it to show, but I can’t seem to figure out how to tell it which page. I have tried if else statements, but I may not have the coding right. So instead of making a massive if else statement, if there is an easier or more efficient way of doing what I’m aiming for, let me know!

Any and all info or suggestions are appreciated!


//////////////////////////////////////////////////////

//This section shows the page bar under the page you are on.

if ($w("#welcomePage").id) {
            $w("#welcomeBar").show();
        } else {
            $w("#welcomeBar").hide();
        }
2

Hello Jared,

For example if you have had “BUTTON1” on several pages but you would want to show that button just on PAGE-5, so it probably could be the following solution…

On ENTER-PAGE ----> check page-name
if page-name not the name i am searching for, do nothing.
Else if it is the right one, do what ever you want to do.

In other words…

$w.onReady(function () {
   myID = <----- put in here your page-ID you searching for!
   console.log ($w('#page1').id)   //---> page-name/ID
   if(... != ...) { .....then....}
   else {.....................}
});
3

Hi Dima,

Thanks for the response! So again, I am new to coding haha. This is what I have, but I get errors clearly. The one Im getting is “myID is not defined”

$w.onReady(function () {
   myID = welcomePage
   console.log ($w('#welcomePage').id)
 if(myID !== '#welcomePage'){
       $w('#welcomeBar').hide();
   }
 else {$w('#welcomeBar').show();}
});
4

Ok, look!

  • myID <----- this is a VARIABLE!

  • welcome <---- this is your DATA ----> a STRING!

STRINGS stand always between —> " " —> like this —> “welcome”

But you don’t need the second line of code in your case.

$w.onReady(function () {
   //myID = welcomePage ----> DEACTIVATED
   //console.log ($w('#welcomePage').id) ----> DEACTIVATED
 if(myID !== '#welcomePage'){
       $w('#welcomeBar').hide();
   }
 else {$w('#welcomeBar').show();}
});

So at least, your code should be like that…

$w.onReady(function () {
  if($w('#page').id !== '#welcomePage'){$w('#welcomeBar').hide();}
  else {$w('#welcomeBar').show();}
});

When page loads, this code asks if the current page has the ID —> “welcomePage”.
If NOT the searched “welcomePage” —> hide my bar
else show my bar!

5

Ok so I tried what you suggested. It’s not populating the bar when I preview the page. Here is what it looks like in dev mode, with a code snippet, and the preview

1429×559 135 KB

1181×165 53.4 KB

6

Ok, i think i had also a little failure in my brain xDDDDD.

Try this one. Just COPY&PASTE it and put it into a new site.
Delete all code which is done before on the new site.
Than just put this code into the blank code-site.

$w.onReady(function () {
 var myElement = "#page"
 var targetId

    $w(myElement+1).onViewportEnter( (event) => {
    targetId = event.target.id; 
    console.log(("Founded TARGET-ID = " + targetId))
    })

 if(targetId !== '#welcomePage'){console.log("YES, i found my page!")}
 else {console.log("Nope, that's not my searched page!")}
})

Then publicate the site and open the new created page.

PRESS —> F-12 on your keyboard (usinf google-chrome)

Go to —> CONSOLE and look what happened???

7

Ok I see what appeared, but don’t understand fully. I think my brain is fried trying to comprehend everything as well as working on it for a few hours haha.

1018×335 18.8 KB