Automate html in Javascript/jQuery

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!

Is it 15 seconds after the page has loaded, or 15 seconds after some other event has occured, like user started the video and then 15 seconds later the link becomes active? — Christofer Eliasson
– Christofer Eliasson, Commented Jul 4, 2012 at 7:36
It's 15 seconds after the page has loaded, yeah. It's not possible to detect when the video has been played isn't it? — Adam McArthur
– Adam McArthur, Commented Jul 4, 2012 at 12:38
I believe that depends on the the video-player. Have no experience of the built-in HTML5 player, if that fires any events, but I believe that players like Flowplayer and similar fire events when a video has stopped playing. In that case, you could listen for that event, and display the link when the event is fired. — Christofer Eliasson
– Christofer Eliasson, Commented Jul 4, 2012 at 12:57

Esailija · Accepted Answer · 2012-07-04 07:39:05Z

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>

edited Jul 4, 2012 at 7:39

Esailija

140k24 gold badges280 silver badges328 bronze badges

answered Jul 4, 2012 at 7:37

Trogvar

8566 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Adam McArthur Over a year ago

Thanks for putting the html there for me! Great answer thank you very much :)

Trogvar Over a year ago

Welcome :) Don't forget to accept the solution, if you like it

Adam McArthur Over a year ago

Sorry about taking so long to accept that - my internet went funny for a while. I know this is getting a bit away from the question, but do you know how I would additionally make that link go away again? (Eg - SendBackToTimeout(convertTextToLink, forever); ?? Thanks!

Adam McArthur Over a year ago

To sum that up: It waits 3 seconds, it displays for 3 seconds, and then it hides it again forever!!

Trogvar Over a year ago

@AdamMcArthur You can use call to setTimeout() to make a delayed execution of any code. So, in you case, if you wish to delete the link entirely after showing it for three seconds:

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

If you would like to show/hide something periodically, then of course there're better ways

|

Chris · Accepted Answer · 2012-07-04 07:38:36Z

1

var waiting = true;

//set waiting to false after 15 seconds
setTimeOut(function() { waiting = false },15000); 

$('#automate').click(function(e) {
    if(waiting === true) {
       e.preventDefault(); //prevent the link from firing
    }
});

answered Jul 4, 2012 at 7:38

Chris

7161 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Automate html in Javascript/jQuery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related