Question

I’m currently preparing a cool video presentation on my html web page. At the end of it, I want to be able to click on the video and be taken to a page – however I only want the link to come into effect at a certain time.

I’ve done some research and I can’t find anything about this.

As an example, let’s say that I want to make a link on something…

<a href="#" id="automate">This link will go somewhere after 15 seconds</a>

How can I make it so that <a> tag doesn’t work for 15 seconds with jQuery or JavaScript? (JavaScript preferred but it doesn’t really matter!). Remember – I don’t want that whole line of code to suddenly appear – prior to the link working that should just be text!

Thanks!

Answer 1

Here delay is set to 3 seconds (3000 milliseconds in call to setTimeout). Change it to 15000 to make it 15 seconds

$(document).ready(function() {
   setTimeout(convertTextToLink, 3000);
});

function convertTextToLink() {
    $('#thanks').html('<a href="http://example.com">Thanks for watching. You may now proceed.</a>');
}

Html

<h1>Hello</h1>
<p>here are your vids</p>
<div id="thanks">Thanks for watching</div>