Elements hidden in sandbox mode but not on live site

Hey guys, not sure what happened between yesterday and today but my code which was perfectly working fine until yesterday seems to be broken. Here’s the issue: I have customized my header navigation bar to show an arrow icon for the page that is loaded and to HIDE the same icon for all other pages. When user goes to another page, the arrow icon for that specific page is shown and the rest are hidden.
For some reason, in the sandbox mode this is working perfectly fine. In fact it was working fine on my live website yesterday as well. But today, on the live website all the arrow icons are being displayed for all the pages (screenshots below)

I have the following code:
Under site tab, I show all arrow icons (since this is the header):
$w(“#vectorImage11, #vectorImage12, #vectorImage13, #vectorImage14”).show();

Under page tab, I hide all arrow icons EXCEPT the one for this particular page:
$w(“#vectorImage11, #vectorImage13, #vectorImage14”).hide();

Screenshot 1: sandbox preview
Screenshot 2: same page on live site


Would appreciate any help. Thank you so much!

So basically it seems that the site code is overriding the show and hide code on the page code.

I would simply try commenting out the site code first and then change the page code to hide the unwanted arrows and show the needed arrow only.

I tried what you suggested and that’s actually what I had initially as its a way lot simpler and logical. But for some reason that doesn’t work. Under site code now I have nothing. And under page code, I specifically display only the one arrow for that particular page. And I have the option to “Hide on Load” checked for all the arrows. So, only the one specifically requested should be displayed and rest should stay hidden.

Makes perfect sense and logically should work. However now something weird happens which I encountered before too; hence I had all that complex workaround. When I load the site now and click on the first page, the arrow shows up where it should. BUT when I click on the 2nd page, the arrow for the 1st page does NOT hide. So now I have arrows displayed for both 1st and 2nd page. If I then go to 3rd page, then arrows for 1st, 2nd, 3rd are displayed. For some reason they are not hiding.

Maybe because this is the header and has different properties?

Also, I want to reiterate that under sandbox mode, my first solution works perfectly fine. It loads the site code (to show all arrows) and then the page code (to hide all arrows except the one for that particular page).

However on the live site it seems, that the site code runs but for some reason the page code is not executing or taking affect.

You could try having all the arrows set as hidden on load in their properties and then only showing the wanted arrow in the page code.

We are all experiencing issues with show() hide() on our live sites and on chrome browser. Try the live site on edge or another browser. Please report here if it works on other browsers so I can verify you are having the same issue.

Just tried on Edge and everything is working as expected. Thanks so much!

If this issue is more widespread as you suggested, are there any steps being taken to resolve it?

1 Like

If we all report it directly by opening a ticket via the Help Center, it might get noticed sooner. Maybe there is another way to contact them but what I did —Contact Wix go to technical issues, click live site errors, and click the here part ‘If you are still unable to access your site, follow the guidelines here for submitting a ticket to Wix Support.’ This will open the ticket submission box as seen below.

1 Like

Thanks @givemeawhisky for your suggestions. Turns out its a chrome issue :wink:

Ticket submitted!!

I have the same problem! It ruins the entire site!

Ok…everything seems to be working fine on Chrome as well now without me doing anything.

@abalonia and @tamtamdesign : Is the issue fixed for you guys as well?

Fixed like a miracle! Too bad it happened just right when I had to present the site to customers…