Coding to Time Delay Section 7.1

LeadPages and Samcart have an option where you can make the next section of your webpage show up after X number of minutes. This is helpful if say someone has a video on a page, and at the 8th minute of the video, they want the remaining sections on the page to be visible (like a sales page).

Does anyone know if this can be done in Squarespace? I image some modified coding on the parallax setting might achieve this, but I'm hardly savvy enough to know.

Anybody know?

@tuanphan  I've seen you answer something similar. Wondering if you have any insight here...

Thanks!

Aisha

3 hours ago, acrumbine said:

@tuanphan  I've seen you answer something similar. Wondering if you have any insight here...

Thanks!

Aisha

You need to use JavaScript to do this.

<script>
$("div").hide();
setTimeout(function(){
	$("div").show();
},3000);
</script>

Line 1 - We select the div with $(“selector”) and hide the div.

Line 2 - SetTimeout is a function which takes two parameters - i)Function to call,ii)Time delay after which we call that function.

Line 3 - Inside the function we again select the div and call show function on it.

Line 4 - We specify the time delay in ms(milliseconds) , so 3s ~ 3000ms.

@tuanphan Thank you! So if I have a page with two sections, and I want the top section to be visible immediately, and I want the second section to show up in 3 seconds, I'd add this code where exactly? Page Settings > Advanced ? Page Code Injection?

A

29 minutes ago, acrumbine said:

@tuanphan Thank you! So if I have a page with two sections, and I want the top section to be visible immediately, and I want the second section to show up in 3 seconds, I'd add this code where exactly? Page Settings > Advanced ? Page Code Injection?

A

 

Add to Page Header. Replace div with section id.

Try this guide.

Hi tuanphan, thanks for your help. Unfortunately this has not worked. The link you shared no longer works :-(. 

How do I know the number of my section? 

Thanks!  

I found the way to find the section ID on this blog post, but I still can't get the code to work :-(... Anyone made it work? 

Hi, can you post and example of this code using an example div? 

Think I'm having a syntax issue. Not sure if I should be including the quotes or not.  For example would this work? 

<script>
$("div#block-d8f89965ca0d137117b2").hide();
setTimeout(function(){
    $("div#block-d8f89965ca0d137117b2").show();
},3000);
</script>

or would this work? 

<script>
$(div#block-d8f89965ca0d137117b2).hide();
setTimeout(function(){
    $(div#block-d8f89965ca0d137117b2).show();
},3000);
</script>

Or do you mean something completely different than either of the above?

Thank you!