Hidden Item with "Show On All Pages" Disappears and Appears in Mobile

Discussion Ask a question
,
1

Hello everyone!

I’m brand new to wix code, and wix in general. I’ve been at it for all of a week. It’s been a bit of a struggle :slight_smile: You may be seeing a lot of me.

I ran into a bit of an odd bug. I read through all articles provided by wix and forum posts, but none address this unique problem only I have been able to create. I’m just special that way :slight_smile:
After much frustration I found a workaround, and thought I’d share it here incase anyone else runs into this in the future.

Your thoughts would be appreciated!

Issue in question involves mobile only and the following website:
https://igbusinessservices.wixsite.com/culinaryslut

Background:
Because the Landing page is unique from the other pages, I had to create a “menu” and “follow us” button that would be for the landing page alone, then the same two buttons that would work for all the other pages.

THE SHORT VERSION:
I had a hidden item, set to display on all pages, with code for appearing on mobile. It worked marvellously on most pages except for one. After some experimenting and much frustration I realized something in how wix is set up caused a bug when interacting with a page that had subpages.

The Solution:

Add the element to a page that does not have subpages, and is not the home page. In properties select “Hidden On Load” and “Show On all Pages”. Add the code for showing hidden text on mobile to this one page. It will work fine on every page except pages that have subpages.

Then, whenever you have a page with subpages, add the code for displaying hidden items on mobile display on ONLY the Top Level page (or as some call it the Parent Page). It will then work on that page and all subpages. You do not have to actually add the element to this page, just the code.

THE LONG VERSION

Step One:
I created the “follow us” button that was meant to be seen on mobile only. I did this on the “Off The Menu” page. https://igbusinessservices.wixsite.com/culinaryslut/off-the-menu

Step Two:
I selected the icon and under properties chose “Show On All Pages” and “Hidden On Load”.

Step Three:
I added the following code


=
The code :
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';

$w.onReady(function () {
 if(wixWindow.formFactor === "Mobile"){
  $w("#vectorImage31").show();

}
});

The Problem:

And it did show on all 7 pages I had at the time . Except the About Page… Something interesting happens there. It will show, but not on initial load. Then appear later.

Recreating The Bug:

• I enter a browser from mobile device and enter this url:
https://igbusinessservices.wixsite.com/culinaryslut
• From the Menu, I choose “About”
• "About Page "does not display vectorImage31 (follow me button)
• I visit any other page on the site, for example “Off The Menu”
• I use the menu to visit the “about page” again
• the vectorImage31 then displays

This pattern repeated every single time. The element is missing on initial load. After visiting another page and returning to the “About Page” the element then displays. I could recreated it on several phones using both wifi and data.

Conclusion:

So on further reflection I started wondering - is this “follow us” icon just displaying on pages that are sub-pages of “Off The Menu”. Would any page that was not a submenu page of “Off The Menu” have this problem? So I created a “contact page”. Sure enough, the same odd behaviour where the button disappear and reappears occurred.

I pointed this discrepancy in how Wix functioned to the Support team to suggest that there’s something that could be updated in Wix. They were very uninterested. Which is disappointing, as most companies I’ve dealt with when I find something like this, send a thank you and add it to their list of upgrades. Not a great early experience with support I must admit.

The Eureka Moment:
I don’t want to have the hidden element and appear on mobile code on every single page. There’s going to be a lot of pages. And I’m known for my very visual websites, it’s why clients come to me. The client is committed to this landing page being unique, and all other pages having this specific layout with the “menu” and “follow us” icons. So I have to make it work.

Putting it on all pages and then making it invisible on the landing page seemed to be the most logical solution.

So I deleted the “Follow Me” element from the “Off The Menu” page. I re-created it on “About Page”. All the same stuff: Set the vector to show on all pages, then in properties put it on hidden on load, then added the code to show on mobile.

Then the reverse happened. It worked fine on pages that didn’t have subpages, and this weird disappearing/appearing act occurred on the page that had subpages. So, somewhere there’s an issue with how this setup behaves on Pages that have Subpages. I mentioned that to Wix, not confident they’ll care, but my fingers are crossed they will.

1 Like