Solved

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

Posted on 2007-11-29
8
656 Views
Last Modified: 2010-04-21
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
Comment
Question by:planetemails
  • 3
  • 3
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20372875
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20372890
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
 

Author Comment

by:planetemails
ID: 20373741
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
 
LVL 1

Expert Comment

by:sapainca
ID: 20373855

<!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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Assisted Solution

by:sapainca
sapainca earned 200 total points
ID: 20373872
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 300 total points
ID: 20373894
that should be

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

if anything
0
 

Author Comment

by:planetemails
ID: 20374549
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
 

Author Closing Comment

by:planetemails
ID: 31411628
Thanks ...
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now