Show an element hidden on launch

Ask the community
,
1

I wanted to make a popup box that says “copied to clipboard” after clicking on the email address.
So I created the box with the editor, then hid it on the website launch with the code, and now I want to show it after a certain action, but it doesn’t work. Does anybody know what I’m doing wrong? Ideally, I’d like to hide it again after a couple of seconds.

// Hides the "copied to clipboard" popup box when the page loads
$w("#popup").hide();

// Copies the e-mail on click
$w.onReady( () =>
{
$w('#email').onClick( () => {
	wixWindow.copyToClipboard("email address")
 	.then( () =>
 		{
        	$w("#popup").show();
 		})
	});
});

Thanks in advance for any help.

2

How2-hide an element after an certain amount of time ???

setTimeout(()=>{ ... YOUR CODE HERE ... },3500);

Set your element to hidden in the Editor’s property-panel.

You have your —> onReady-code-part…

$w.onReady(()=>{  STARTS HERE WHEN PAGE IS READY TO DO ACTIONS  });

$w.onReady(()=>{ 
    $w('#email').onClick(()=>{
        //What should happen, after emai-button was clicked ?
        //write it down here......
        //....
        //..
        //.
    });
});

I won’t be neccessary to hide your —> “pop-up”-lement → onLoad, when you set it to —> HIDDEN in the property-panel.

If you want to go the coding way…

$w.onReady(()=>{
    $w("#popup").hide();
    $w('#email').onClick(()=>{
    
    });
});
3

Thank you, it shows it now, it seems like it was the matter of placing the “hide” command within the onReady bracket.

I don’t know why though, it treats setTimeout as a delay here. It basically shows it three seconds later but never hides it again.

Probably I’m doing something wrong again…

$w.onReady( () =>
{
$w('#email').onClick( () => {
    wixWindow.copyToClipboard("email address")
 .then( () =>
        {
        setTimeout(()=>{
        $w("#popup").show();
        },3000);
        });
 });
});

My rationale: I wanted to “timeout” the “show” function after 3000.

4

Alright, I think I solved it, though I’m not entirely sure why it works like that:

$w.onReady( () =>
{
$w('#email').onClick( () => {
wixWindow.copyToClipboard("email address")
 .then( () =>
 {
        $w("#popup").show();
        setTimeout(()=>{
        $w("#popup").hide();
        },3000);
 });
 });
});

Thanks for your help again.