asked on

JavaScript to display the #2 content after a few seconds ...

Hi,
please review the javaScript codes below ...
Can someone please modify it so it works like this (I want to have a dynamic effect, just like as the page is loading results) :
- When the page loads, it displays contents of  which is a loading gif image
- Next, after few seconds (I believe it can be adjusted from the script) it displays  ... replacing the 
- I hope it can works on all browsers too

Any solutions ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <title>Untitled</title>
      <script type="text/javascript">
      function show(id)
      {
            document.getElementById(id).style.display='block';
            /* hide RESULT */
            var str;
                 for (i=1;i<5;i++) {
                        str='Link';
                       if (id!=str) {
                             document.getElementById(str).style.display='none';
                             }
                        }
      }
      </script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p><a href="#" onclick="show('Link')"><img src="loading.gif" width="36" height="37" border="0" alt="Loading ..." /></a></p>
 
<!-- #2 <p> -->
<p id="Link" style="display:none;">http://www.abc.com</p>
 
</body>
</html>

Open in new window

Michel Plungjan

You mean

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function show(id) {
  document.getElementById(id).style.display='block';
}
</script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p><a href="#" onclick="setTimeout('show(\'Link\')',2000); return false"><img src="loading.gif" width="36" height="37" border="0" alt="Loading ..." /></a></p>
 
<!-- #2 <p> -->
<p id="Link" style="display:none;">http://www.abc.com</p>
 
</body>
</html>

Open in new window

Michel Plungjan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function show(id1,id2) {
  document.getElementById(id1).style.display='none';
  document.getElementById(id2).style.display='block';
}
</script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p><a id="Link1" href="#" onclick="setTimeout('show(\'Link1\',\'Link2\')',2000); return false"><img src="loading.gif" width="36" height="37" border="0" alt="Loading ..." /></a></p>
 
<!-- #2 <p> -->
<p id="Link2" style="display:none;">http://www.abc.com</p>
 
</body>
</html>

Open in new window

planetemails

ASKER

Whoaa... so close, man ... the number #2.. .:)
But, I believe it's my fault that includes <a href= at the first time on my codes (actually I got it from one of your solution in EE).

Well, what I really want is the  shows then after few seconds changes to  .. "without have to click a link."
Please look at below codes where I delete the <a href= but still it needs to click the image ... :(

I believe you can modify it ... :)

PS: I try using "onLoad" instead of "onClick" but it's not working ... :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function show(id1,id2) {
  document.getElementById(id1).style.display='none';
  document.getElementById(id2).style.display='block';
}
</script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p><img id="Link1" onclick="setTimeout('show(\'Link1\',\'Link2\')',500); return false" src="loading.gif" width="36" height="37" border="0" alt="Loading ..." /></p>
 
<!-- #2 <p> -->
<p id="Link2" style="display:none;">http://www.abc.com</p>
 
</body>
</html>

Open in new window

sapainca

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <title>Untitled</title>
      <script type="text/javascript">
			function change()
			{
			 document.getElementById("Link1").style.visibility = "hidden";
			 document.getElementById("Link2").style.visibility = "visible";
			}
			
			setTimeout("change()",2000);
      </script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p id="Link1"><a href="#" onclick="change()"><img src="loading.gif" width="36" height="37" border="0" alt="Loading ..." /></a></p>
 
<!-- #2 <p> -->
<p id="Link2" style="visibility:hidden;">http://www.abc.com</p>
 
</body>
</html>

Open in new window

SOLUTION

sapainca

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

planetemails

ASKER

Cool .... :)
but somehow I must combine your both codes into one (to suits on my page).

So, I have to split the points ... Thanks a ton for you both ... :)

By the way, below is my modification codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function change()
{
document.getElementById("Link1").innerHTML = "<a href='http://www.abc.com'>http://www.abc.com</a>";
}
</script>
</head>
 
<body>
 
<!-- #1 <p> -->
<p id="Link1"><img src="loading.gif" width="36" height="37" border="0" alt="Loading ..." onLoad="setTimeout('change()',2000);" /></p>
 
</body>
</html>

Open in new window

planetemails

ASKER

Thanks ...