Countdown then Display a link?

NairB · #1 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

Bob90 · #2 03-23-2007, 03:14 PM

Code:

<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 · #3 03-23-2007, 03:31 PM

Many, many thanks Robert......

Just what I was looking for.

-NairB

NairB · #4 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 · #5 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:

Code:

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

or simply use single quotes:

Code:

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 · #6 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:

Code:

<!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 · #7 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/dynamici...box2/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 · #8 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:

Code:

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 · #9 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

NairB

jscheuer1 · #10 03-25-2007, 03:08 AM

Quote:

Originally Posted by NairB

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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search