[Resolved] How to display a hidden element after few seconds of page load ?

Ask the community
,
1

I’m trying to achieve an animation wherein I fade in a hidden element 2 seconds after a page is completely loaded. I set the element to hidden on load using the properties tool and tried this code to display it after 2 seconds.

$w.onReady(function () {
    let showOptions = {
    'delay': 2000,
    'duration': 1000
    };
    $w('#text1').show("fade",showOptions);
}

Although the problem here is that when the page is loading initially the element is visible for a fraction of second and then it goes hidden when page is fully loaded. Then after 2 seconds the element is displayed with a fade in effect. How do I keep the element hidden completely till the page is completely loaded ?

2

Select the option “Hidden on load” on Properties Panel.

3

The element is already set to “Hidden on load” but still I’m facing the problem.

4

Does this happen in Preview, Live, or both?

5

The elements that you set as hidden on load still have to be loaded when the page is loaded and only then will they be hidden, however they should not be showing on your page,

Maybe for what you have on your page, there is quite a lot on the page that it is taking a while to load all of the page and therefore you are seeing the hidden element whilst it is all loading and before Wix can tell it to be hidden.

As Yisrael has mentioned above, if it works in preview and not in live or not in preview and in live, then it might be more of a bug within Wix, however it is in both then it is more likely to be something on your page I am thinking.

Also, how long does your page actually take to load in preview and in live, have you tried just simply making the delay longer to say 5000ms just to see if it makes any difference or if it still does it with a longer waiting time.

Have a try of using collapsed on load and the expand function instead of hidden on load and show and see if it still does the same thing.

When it is collapsed it will not take up any room on your page and should in theory, not be shown on your page. Whereas with hidden it is hidden from the users view, however it is still on the page itself.

https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hidden
hidden
Indicates if the element is visible or hidden.
Description
If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

https://www.wix.com/corvid/reference/$w.CollapsedMixin.html#collapsed
collapsed
Indicates if the element is collapsed or expanded.
Description
If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element’s place where possible. The elements that move up maintain their positions relative to one another.

6

Also, take a look at the related posts section and you should see a link to this post, however for yourself this post will be over the top for what you need.
Are Hidden Elements loaded at start?

7

One last thing to note too is that you need to be using fade and not show in your options.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show
https://www.wix.com/corvid/reference/$w.EffectOptions.html#FadeEffectOptions
Examples
Show an element using the fade effect and options

let fadeOptions = {
"duration": 2000,
"delay": 1000
};
$w("#myElement").show("fade", fadeOptions);

Whereas you are using show instead of fade…

let showOptions = {
'delay': 2000,
'duration': 1000
};
$w('#text1').show("fade",showOptions);
}
8

In preview, the animation is not even happening. The element is being displayed as if it wasn’t set to hidden on load.

9

Thanks for your help.
Regarding the thing that I may have lot of stuff on my page for that issue to happen, I created a separate test page wherein I just added a Text element and tried to display it with the required animation. I am still facing the same issue with this page.

10

Also, I didn’t get you on the ‘fadeOptions’ and ‘showOptions’ thing. Aren’t they just variable names ?

11

I THINK this is a bug within Wix. I tried doing the same thing but added a button this time and shifted the animation code inside the onClick function of the button. Now on running the code live, I found no unexpected display of the text while the page is loading. And the preview mode is also working fine on button click which earlier was not also hiding the element.

12

It is not a bug, it is just that you are trying to use it after the page has loaded and it won’t let you do that as it needs you to do something before the show() line.

So, like you have said with your onClick event for your button, it should be something like this here.

$w.onReady(function () {
});

let fadeOptions = {
"duration": 1000,
"delay": 2000
};

export function button1_click(event) {
$w("#your-element-here").show("fade", fadeOptions);
}

If you want to be doing it when your page first loads and not with any user activity like with an event function, then you need to be using the set timeout method, something like this below.

$w.onReady(function () {
});

setTimeout(function () {
$w("#your-element-here").show("FadeIn");
}, 2000);
13

Thanks, its working now.

14

@givemeawhisky
Master GOS, not to be pedantic, but from a programming standpoint, the two samples of code above are identical, as far as execution in JS.

This sample code is identical to the two sample codes you listed above:

let xxxOptions = {
'delay': 2000,
'duration': 1000
};
$w('#text1').show("fade",xxxOptions);
}

Per the API, the object following the fade command needs to have the key/value combo of “delay” and “duration” (in any sequence) - the name of the object never matters.

15

@sagarborn2play
I’ve run into this, repeatedly.
Using collapse and hidden prevents the element from showing during page build (onReady routine).

When you’re ready to show your element, use expand and show .

16

@brainstorrrm Thanks buddy.