Solved

Creating a delayed link display in Javascript

Posted on 2006-11-30
4
459 Views
Last Modified: 2008-01-09
Hello folks,

I searched the Internet and have had no luck finding a Javascript that will allow me to delay the display of a link.

There are plenty of great delayed links, such as this one:

<head>
<script language="JavaScript">
<!--
var sTargetURL = "http://www.target page.com/index.html";

function doRedirect()
{ setTimeout( "timedRedirect()", 40*1000 ); }

// There are two definitions of 'timedRedirect', this
// one adds to the visitors page history.
function timedRedirect()
{
window.location.href = sTargetURL;
}
//-->
</script>
<script language="JavaScript1.1">
<!--
function timedRedirect()
{ window.location.replace( sTargetURL ); }
//-->
</script>
</head>

<body>
  <p align="center" class="style2">
<a href="javascript:doRedirect()">Continue to Website</a>

But I am not interested on a delay after the link is displayed. Rather, I want to delay the *displaying* of the text, "Continue to Website."

There are two possible ways to do this...
1 - make the text (link) appear invisable (same as background color) and change it to a different color after a preset amount of time
OR
2 - actually hold back the display of the text (link) until a preset amount of time has past.

I will offer an additional 125 pts for both methods.

How can I accomplish this task?

Thank you.
0
Comment
Question by:sconnell
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
devic earned 250 total points
ID: 18047010

here check some methods:
//============================================================================
<html>
<body bgcolor="white">

<div id="myLink1">&nbsp;</div>
<a id="myLink2" style="display:none" href="http://www.yahoo.com">yahoo</a><br>
<a id="myLink3" style="color:white;" href="http://www.answers.com">answers</a><br>

<script>
setTimeout("inserLink()", 1000);
setTimeout("displayLink()", 2000);
setTimeout("colorLink()", 3000);
setTimeout("appendLink()", 4000);


function inserLink()
{
      document.getElementById("myLink1").innerHTML = "<a href='http://www.msn.com'>msn</a>";
}

function displayLink()
{
      document.getElementById("myLink2").style.display = "inline";
}

function colorLink()
{
      document.getElementById("myLink3").style.color = "blue";
}

function appendLink()
{
      var aLink = document.createElement("a");
      aLink.href = "http://www.google.com";
      aLink.innerHTML = "<b>google</b>";
      document.body.appendChild(aLink);
}
</script>


</body>
</html>
0
 
LVL 4

Author Comment

by:sconnell
ID: 18049072
Fantastic!

This is exactly what I am looking for!

Can you please tell me how to get the "aLink.innerHTML = "<b>google</b>";"  to center on the webpage (rather than default to left justified).

Thank you again!
0
 
LVL 25

Expert Comment

by:devic
ID: 18050424
simple add <center> tag:
=======================================
<html>
<body bgcolor="white">

<script>
setTimeout("appendLink()", 2000);


function appendLink()
{
     var aLink = document.createElement("a");
     aLink.href = "http://www.google.com";
     aLink.innerHTML = "<center><b>google</b></center>";
     document.body.appendChild(aLink);
}
</script>


</body>
</html>
0
 
LVL 4

Author Comment

by:sconnell
ID: 18050659
DOH! I think I need some sleep!

Thank you!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question