Page 1 of 1
Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 12:53 am
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"> </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!!
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 11:02 am
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.
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 8:41 pm
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 ..
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 8:51 pm
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.
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 9:05 pm
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"> </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!
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 9:17 pm
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.
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 9:23 pm
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.
Re: Javascript Countdown when clicking a link
Posted: Tue Aug 03, 2010 9:31 pm
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.