PDA

View Full Version : Countdown then Display a link?



NairB
03-23-2007, 02:49 PM
Hi,

Does anyone know a simple script that will countdown say 30 seconds from page loading and then display a link??

Many thanks...

NairB :) :o

Bob90
03-23-2007, 03:14 PM
<div id="my_div"></div>
<script>
var element_id = "my_div" ; //namew of div or object that you want the link to appear in (Div is best)
var link_text = "<a href='http://www.robertgarford.com/'>Hello</a>"; //link location
var time = 3; //time in seconds until display
setTimeout(function(){document.getElementById(element_id).innerHTML = link_text},time*1000)
</script>

NairB
03-23-2007, 03:31 PM
Many, many thanks Robert......http://i27.photobucket.com/albums/c192/nairbs/bowdown.gif

Just what I was looking for. :)

-NairB

NairB
03-24-2007, 04:42 AM
Bob,

With the script you posted, I tried to center the link on my site by adding <p align="center"> inside the script as seen in the following.....

<div id="my_div"></div>
<script>
var element_id = "my_div";
var link_text = "<a href='http://www.robertgarford.com/'><p align="center">Hello</a>";
var time = 3;
setTimeout(function(){document.getElementById(element_id).innerHTML = link_text},time*1000)
</script>

This stops the script working.....do you have any suggestions.

Also I am using lightbox and by adding rel="lightbox" after the URL it stops working.

Do you have any advice.

Many thanks again bob. :)

NairB

thetestingsite
03-24-2007, 05:19 AM
On this line, you would either have to escape the quotes by adding a backslash before them like so:



var link_text = "<a href='http://www.robertgarford.com/'><p align=\"center\">Hello</a>";


or simply use single quotes:



var link_text = "<a href='http://www.robertgarford.com/'><p align='center'>Hello</a>";


This applies for any "string" you put in between the quotes on that (or any line similar to this).

Hope this helps.

jscheuer1
03-24-2007, 12:41 PM
The quoting should actually be reversed so that the more conventional quoting for HTML markup may be used. An unclosed <p> element inside of an inline link element is just asking for trouble. Centering and other presentational styling should be done with style, not attributes and/or additional markup:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#my_div { /*center division and/or its content*/
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>

<div id="my_div"></div>

<script type="text/javascript">
(function(){
var element_id = 'my_div' ; //name of div or object that you want the link to appear in (Div is best)
var link_text = '<a href="http://www.robertgarford.com/">Hello<\/a>'; //link code
var time = 3; //time in seconds until display
setTimeout(function(){document.getElementById(element_id).innerHTML = link_text;},time*1000);
})();
</script>

</body>
</html>

Notes: I added the required type attribute and an anonymous function to shield the code's variables from any possible conflicts with other scripts, if any.

NairB
03-25-2007, 12:37 AM
Thanks again folks for your help on this.

I have entered the code and now I am trying to use it with lightbox.http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

The URL displays after 3 seconds and opens but will not with the lightbox effect.

Without showing the entire script, here is the section with the script as described above and the added rel="lightbox" code...

<div id="my_div"></div>

<script type="text/javascript">
(function(){
var element_id = 'my_div' ; //name of div or object that you want the link to appear in (Div is best)
var link_text = '<a href="/mkportal/video/How_to_make_chicken_korma.swf" rel="lightbox" >Click Me To Show Video<\/a>'; //link code
var time = 3; //time in seconds until display
setTimeout(function(){document.getElementById(element_id).innerHTML = link_text;},time*1000);
})();

</script>

Everything works but not the lightbox effect. Do I need to declare lightbox before I add it to this script??

Thanks,

NairB

jscheuer1
03-25-2007, 01:43 AM
You didn't say you were using this with lightbox. To do so, the lightbox files must be linked to the page in the usual manner. You also need to initialize lightbox after the link is added to the page's content. There are various ways to do this (the initialization) but, using the existing code, it can be done like so:


setTimeout(function(){document.getElementById(element_id).innerHTML = link_text;initLightbox();},time*1000);

I'm not sure how well lightbox will work with a video (I suspect not at all well) though, that is another issue entirely.

NairB
03-25-2007, 02:22 AM
Thanks John,

I tried the initlightbox() code but didn't work.

To explain, I have already got lightbox to play swf files. Because they take a few seconds to load, I do not want the link to play them until loading of the swf file is complete.

To see what I mean, refer to my website http://www.yamahabikersforum.com

You will see a little video preview box to the right and a link saying "click here to view movie"

When you click this when the page just loads, the video will not immediately play BUT if you leave until the page is ready, say, 30 seconds or so ie when the swf file has downloaded....then click link, the lightbox will activate and play movie happily.

But I want to delay folks from clicking this link until page is ready & they will see the wonderful lightbox effect :rolleyes:

NairB

jscheuer1
03-25-2007, 03:08 AM
I tried the initlightbox() code but didn't work.

I wouldn't think that it would. Try it as I wrote it:

initLightbox()

I see the video is working (not sure how you managed that) so, this (using the correct case of the letters for the function call) should take care of it then.

If you continue to have problems, give me a link to the page where you have this delayed link (working or not) setup.

NairB
03-25-2007, 03:22 AM
John,

You are an absolute star http://i27.photobucket.com/albums/c192/nairbs/bowdown.gif

That works. How come you must use a capital L ??

Thanks again friend.

Oh, I will send you a PM.

-NairB :)

jscheuer1
03-25-2007, 03:27 AM
You're welcome. It matters because the author of lightbox wrote it into the script that way and because javascript is a case sensitive coding language.

taydu
12-18-2007, 05:12 AM
It's possible to show the countdown too ? 3 ... 2 ... 1 ... and show link

jscheuer1
12-18-2007, 08:48 AM
It's possible to show the countdown too ? 3 ... 2 ... 1 ... and show link

There are various ways depending upon the sort of layout you want this to have, here's one:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Count Down Link - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
document.write('<style type="text/css">#timed{visibility:hidden;}<\/style>')
function delay_link(){
var d=delay_link, t=document.getElementById('timed');
if(d.c&&d.c.nodeValue.replace(/[^\d]*/,'')-1>0){
d.c.nodeValue='\xa0\xa0'+(d.c.nodeValue.replace(/[^\d]*/,'')-1);
setTimeout('delay_link()', 1000)
return;
}
else if(!d.c){
d.c=document.createTextNode('10');
t.parentNode.insertBefore(d.c,t);
setTimeout('delay_link()', 1000)
return;
}
d.c.nodeValue='\xa0\xa0\xa0\xa0';
t.style.visibility='visible';
}
</script>
</head>
<body>
<div><a id="timed" href="whatever">Link Text or img tag</a> Hi</div>
<script type="text/javascript">delay_link();</script>
</body>
</html>

Here's another:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Count Down Link - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.cent {
text-align:center;
margin:0 auto;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#timed{display:none;}<\/style>')
function delay_link(){
var d=delay_link, t=document.getElementById('timed');
if(d.c&&d.c.nodeValue.replace(/[^\d]*/,'')-1>0){
d.c.nodeValue='\xa0\xa0'+(d.c.nodeValue.replace(/[^\d]*/,'')-1);
setTimeout('delay_link()', 1000)
return;
}
else if(!d.c){
d.c=document.createTextNode('10');
t.parentNode.insertBefore(d.c,t);
setTimeout('delay_link()', 1000)
return;
}
d.c.nodeValue='';
t.style.display='inline';
}
</script>
</head>
<body>
<div class="cent"><a id="timed" href="whatever">Link Text or img tag</a></div>
<script type="text/javascript">delay_link();</script>
</body>
</html>

Notes: The nice thing about these two is that the link will be on the page when it loads. So, if it needs to be initialized onload, it will be. No extra steps need to be taken. The first method is good for content that must fit a particular layout, the second one can work for that too, but is centered and may not work well in an inline sort of situation.

taydu
01-06-2008, 10:36 AM
thank you jscheuer1, it's possible to display this type of link after the counter id done ?


<a href='http://www.download.com/dsplus/ds.php?p=<filename />&amp;t=<token />'>Click Here to start your download</a>

I tried


<div class="cent"><a id="timed" href='http://www.download.com/dsplus/ds.php?p=<filename />&amp;t=<token />'>Click Here to start your download</a></div>
<script type="text/javascript">delay_link();</script>

it wouldn't work, what is wrong ?

jscheuer1
01-06-2008, 02:57 PM
Works fine here:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Count Down Link - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.cent {
text-align:center;
margin:0 auto;
}
</style>
<script type="text/javascript">
document.write('<style type="text/css">#timed{display:none;}<\/style>')
function delay_link(){
var d=delay_link, t=document.getElementById('timed');
if(d.c&&d.c.nodeValue.replace(/[^\d]*/,'')-1>0){
d.c.nodeValue='\xa0\xa0'+(d.c.nodeValue.replace(/[^\d]*/,'')-1);
setTimeout('delay_link()', 1000)
return;
}
else if(!d.c){
d.c=document.createTextNode('10');
t.parentNode.insertBefore(d.c,t);
setTimeout('delay_link()', 1000)
return;
}
d.c.nodeValue='';
t.style.display='inline';
}
</script>
</head>
<body>
<div class="cent"><a id="timed" href='http://www.download.com/dsplus/ds.php?p=<filename />&amp;t=<token />'>Click Here to start your download</a></div>
<script type="text/javascript">delay_link();</script>
</body>
</html>

But - <filename /> and <token /> are probably supposed to be replaced with actual values, either by you or by the server.

maxentertainment
01-21-2008, 05:14 PM
Please help me
i have a question
if i want write a test near the countdown for exemple:
">HERE#timed{display:none;}<
and Hide when display the link

how i can make ?