Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 668
  • Last Modified:

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 <!-- #1 <p> --> which is a loading gif image
- Next, after few seconds (I believe it can be adjusted from the script) it displays <!-- #2 <p> --> ... replacing the <!-- #1 <p> -->
- 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

0
planetemails
Asked:
planetemails
  • 3
  • 3
  • 2
2 Solutions
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
Or

<!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

0
 
planetemailsAuthor Commented:
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 <!-- #1 <p> --> shows then after few seconds changes to <!-- #2 <p> --> .. "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

0
Technology Partners: 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!

 
sapaincaCommented:

<!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

0
 
sapaincaCommented:
Or, you may be after something more like this?....


<!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>";
			}
			
			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>
 
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
that should be

<body onLoad="setTimeout('change()',2000);">

if anything
0
 
planetemailsAuthor Commented:
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

0
 
planetemailsAuthor Commented:
Thanks ...
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now