Hidden Desktop element loading for a split second

Discussion Ask a question
,
1

I have hidden a desktop element with this code:
import wixWindow from ‘wix-window’;

$w.onReady(function () {
if(wixWindow.formFactor === “Mobile”){
$w(‘#button39’).show();
$w(‘#gallery2’).show();

 	}

});

The code works fine but the hidden elements load for a split second on the desktop site. Is it possible to disable this behaviour?

2

You have to check to not load them in the properties panel. If you do like this they will be active until the page is loaded. Check properties panel and hide them there

3

Yes but in the case of a gallery the only option you can choose is hidden on load or collapsed on load and both properties do not work

4

Have you tried the new rendering API?

Try

import wixWindow from 'wix-window'; 
 $w.onReady(function () { 
  if (wixWindow.rendering.renderCycle === 1) { 
   //hide you stuff here
 }
});

I don’t know if it works but then you are hiding the objects server side.

1 Like
5

Hello thank you for the suggestion but as I have no coding knowledge whatsoever I am not sure about how to implement it. Where would I add this new piece of code and would I leave the other code in?

6

Hi @scott-typaldos & @andreas-kviby !

I’m experiencing the same issue. I have a black strip in my header (#headerStrip) set to “hidden on load” in the properties panel (It’s part of a floating header concept fyi, which the code works perfectly for but…) when the website first loads the #headerStrip would appear for a brief second then hide!

You can take a look here: www.VictoryMusicBox.com

I took Andreas’ advice and added rendering API:

import wixWindow from 'wix-window'; 


$w.onReady(function () {
 if (wixWindow.rendering.renderCycle === 1) { 
   $w('#headerStrip').hide();
 }

});

Which ALMOST worked. Except now, when I load the live site the #headerStrip doesn’t appear (yay) but then will do this weird and quick “appear/disappear” flicker thing (!). And then when I scroll the down the code works properly.

(Also, I don’t think this is relevant, but FYI - I have the #headerStrip hidden on load and then set to show/hide based on an anchor’s Viewport Leave/Enter with the following code:

export function floatHeader_viewportEnter(event) {
    $w('#headerStrip').hide('fade');
    $w('#vmbLogo').show('fade');
}

export function floatHeader_viewportLeave(event) {
    $w('#headerStrip').show('fade');
    $w('#vmbLogo').hide('fade');
}

The ultimate sequence I want for the viewer is

  1. page loads
  2. They ONLY see the #vmbLogo
  3. THEN, when they scroll down *based on the #floatHeader anchor element the #headerStrip will fadein (which currently works perfectly)

Any ideas on how to get rid of this flickering headerStrip?