sphinx Posted September 23, 2010 Share Posted September 23, 2010 Hi all, Basicly, I want javascript to display a countdown, then once the timer has expired display a link, so far I have this <div id="my_div"></div> <script> var element_id = "my_div" ; var link_text = "<a href='cdtl.html'>Hello</a>"; var time = 3; setTimeout(function(){document.getElementById(element_id).innerHTML = link_text},time*1000) </script> Outcome: http://prizelive.net/dnd/cdtl.html Is it possible to add a countdown to that instead of nothing showing before link shows. Thanks. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 23, 2010 Share Posted September 23, 2010 <html> <head> <script type="text/javascript"> window.onload = function() { countDown('my_div', '<a href="cdtl.html">Hello</a>', 3); } function countDown(elID, output, seconds) { document.getElementById(elID).innerHTML = (seconds==0) ? output : seconds; if(seconds==0) { return; } setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000); } </script> </head> <body> <div id="my_div"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
sphinx Posted September 23, 2010 Author Share Posted September 23, 2010 Utter legend, thanks. Quote Link to comment Share on other sites More sharing options...
sphinx Posted September 23, 2010 Author Share Posted September 23, 2010 Where would I put text if I want it to say: Time until link appears: (Countdown here). thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 23, 2010 Share Posted September 23, 2010 document.getElementById(elID).innerHTML = (seconds==0) ? output : 'Time until link appears: ' + seconds; Quote Link to comment Share on other sites More sharing options...
sphinx Posted September 23, 2010 Author Share Posted September 23, 2010 mjdamato, you are an utter pro at this, Lastly, can this countdown be used in conjuction with each other, because i want two of the same timing countdowns to appear on my website, however text needs to be different so it's fits, ive tried this: <script type="text/javascript"> window.onload = function() { countDown('my_div', '<a href="#">Click here to go to the main homepage.</a>', 10); } function countDown(elID, output, seconds) { document.getElementById(elID).innerHTML = (seconds==0) ? output : '<span style="color: rgb(255, 0, 0);">The link will appear in: ' + seconds; if(seconds==0) { return; } setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000); } </script> <script type="text/javascript"> window.onload = function() { countDown1('account', '<a href="#">Click here.</a>', 10); } function countDown1(elID1, output1, seconds1) { document.getElementById(elID1).innerHTML = (seconds1==0) ? output1 : '<span style="color: rgb(255, 0, 0);">Wait ' + seconds1; if(seconds1==0) { return; } setTimeout("countDown1('"+elID1+"', '"+output1+"', "+(seconds1-1)+")", 1000); } </script> And div'd it uniquely: <div id="account"></div> + <div id="my_div"></div> The only problem is, only one of them works which is the account div one. thanks a million. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 23, 2010 Share Posted September 23, 2010 Are you trying to piss me off? I say that jokingly, but it is kind of frustrating when you provide a solution to someone and then they change the requirements (not once, but twice!). Just tell me up front what you want. If I can't provide it all then I will provide what I can. <html> <head> <script type="text/javascript"> window.onload = function() { countDown('my_div1', '<a href="cdtl.html">Hello 1</a>', 3); countDown('my_div2', '<a href="cdtl.html">Hello 2</a>', 5); countDown('my_div3', '<a href="cdtl.html">Hello 3</a>', 10); } function countDown(elID, output, seconds) { document.getElementById(elID).innerHTML = (seconds==0) ? output : 'Time until link appears: ' + seconds; if(seconds==0) { return; } setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds-1)+")", 1000); } </script> </head> <body> <div id="my_div1"></div> <div id="my_div2"></div> <div id="my_div3"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.