Javascript Countdown when clicking a link

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
VanderAlexander
Forum Newbie
Posts: 6
Joined: Tue Aug 03, 2010 12:41 am

Javascript Countdown when clicking a link

Post by VanderAlexander »

Hi everybody,
I have used a little Javascript and created a countdown that initiates when the browser is loaded. I am now looking for some advice on how to modify or rewrite this code, so that the countdown only appears and proceeds as coded when I click on a link.

Here is the code as reference:

Code: Select all

<html>
<head>
<script type="text/javascript">
var time = 20; //Time (in seconds) to wait ..

function countdown() {
time--;
if (time == 0) {
text = 'Countdown finished';
} else {
hour=Math.floor(time/(60*60));
rest=time%(60*60);
min=Math.floor(rest/60);
rest=rest%60;
text = hour + ":" + min + ":" + rest;
window.setTimeout('countdown()', 1000);
}
document.getElementById('time_div').firstChild.data = text;
}
</script>
</head>
<body onLoad="countdown()">
Waiting Time: <div id="time_div">&nbsp;</div>
</body>
</html>
Thank you all for your time.
Patrick

Edit: For clarification, clicking on the link should just make the Countdown pop up. No redirect or anything fancy when clicking on the link.

Any advice appreciated!!
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: Javascript Countdown when clicking a link

Post by JakeJ »

Use jQuery and the ready() event to start your timer when a link is clicked.

Code: Select all

$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

Obviously, a call to your function in place of the alert is the way to go here. But $("a")..... means it's waiting for a link to be clicked and it will call whatever function you choose.
VanderAlexander
Forum Newbie
Posts: 6
Joined: Tue Aug 03, 2010 12:41 am

Re: Javascript Countdown when clicking a link

Post by VanderAlexander »

Thank you.
This is my first time working with the jQuery library.
I'll probably run into some problems down the road and post here ..
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: Javascript Countdown when clicking a link

Post by JakeJ »

Oh, that's an easy one....
put </script> at the end of your link to the google jquery library and then put an opening <script> above $(document).ready

When you link to a library, it has to be enclosed in it's own <script></script> tags. And it's fine to multiple script tags. All of your functions can go between one set of tags though.
VanderAlexander
Forum Newbie
Posts: 6
Joined: Tue Aug 03, 2010 12:41 am

Re: Javascript Countdown when clicking a link

Post by VanderAlexander »

OK, so I am finally getting somewhere.
This is my script so far:

Code: Select all


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

var time = 20; //Time (in seconds) to wait ..
function countdown() {
time--;
if (time == 0) {
text = 'Countdown finished';
} else {
hour=Math.floor(time/(60*60));
rest=time%(60*60);
min=Math.floor(rest/60);
rest=rest%60;
text = hour + ":" + min + ":" + rest;
window.setTimeout('countdown()', 1000);
}
document.getElementById('time_div').firstChild.data = text;
}





$(document).ready(function(){

	$("a.1").click(function(event){

		event.preventDefault();
		document.write("Hello World, thanks for clicking!");

  });

});
</script>


</head>
<body>

Waiting Time: <div id="time_div">&nbsp;</div>
<a href="#" class="1">This is the link</a>

</body>
</html>


The alert box pops up successfully, but how do I call my function countdown() in this script instead of the alert box appearing?
Jake, thanks so much!
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: Javascript Countdown when clicking a link

Post by JakeJ »

Try this:

Code: Select all

<script type="text/javascript">
$(document).ready(function(){

        $("a.1").click(function(event){

                countdown();

  });

});

var time = 20; //Time (in seconds) to wait ..
function countdown() {
time--;
if (time == 0) {
text = 'Countdown finished';
} else {
hour=Math.floor(time/(60*60));
rest=time%(60*60);
min=Math.floor(rest/60);
rest=rest%60;
text = hour + ":" + min + ":" + rest;
window.setTimeout('countdown()', 1000);
}
document.getElementById('time_div').firstChild.data = text;
}

</script>
Notice I put the $(document).ready statement first. There's no technical reason, it just seems like good practice.

Other than that, you can call any function the same way.

BTW - Watch what happens when you click the link several times.
VanderAlexander
Forum Newbie
Posts: 6
Joined: Tue Aug 03, 2010 12:41 am

Re: Javascript Countdown when clicking a link

Post by VanderAlexander »

Excellent.
However, I can't have this happening to my countdown when the link is clicked several times ...
Ohh wow, is there any way to fix this as well?

Edit:
I'm thinking in terms of making the link disappear once the link was clicked.
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: Javascript Countdown when clicking a link

Post by JakeJ »

There is, but I don't have time to work it out right now. Possibly tomorrow. Send me a private message with your email address and if you have google talk, that would be great.
Post Reply