Solved

to make resetting smoother

Posted on 2009-07-12
5
258 Views
Last Modified: 2013-11-19
Please open the following web page. In the rectangle, click the 'display' button, letters would appear in the cells. Then click the 'reset' button.  Letters in the  top cells would disappear.  Then there is an interval during which nothing happens.  Then letters in the bottom cells disappear.

I like to see that resetting of the letters in the bottom cells takes place immediately after that in  the top cells.  There is not stop between them.

http://www.pinyinology.com/wheel/display/tryAgain2f.htm

Thanks. l
0
Comment
Question by:fuli3665
  • 3
  • 2
5 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24835159
The requested document was not found on this server.
0
 

Author Comment

by:fuli3665
ID: 24836391
sorry. please try the following web page:


http://www.pinyinology.com/wheel/display/tryAgain2f.html
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24836664
Like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"><head> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

 

 <title>appearance of letters</title> 

 

<style type="text/css"> 

  body {margin:20px; font-size:110%;}
 

  table {border-collapse:collapse; margin-bottom:20px;}
 

  td {border:3px blue solid; width:30px; height:30px; text-align:center;}
 

#rect {border:2px red solid; padding:15px 0 15px 15px; margin-bottom:20px; width:40%; margin-top:20px;}

</style> 

 

<script type="text/javascript"> 

  var text2beshown  = new Array( 3 );

  text2beshown[ 0 ] = 'abcdefg-xyz';

  text2beshown[ 1 ] = 'CALIFORNIA';

  text2beshown[ 2 ] = 'TAMPA';

  text2beshown[ 3 ] = 'FLORIDA';
 

  var lno;

  var show = 0;

  var loc  = 0;
 

  function showLetter( loc, lno, show ) {

//  alert( 'showLetter(): ' + loc + '_' + lno + '  show: ' + show  );

    var letter = document.getElementById( 'td_' + loc + '_' + lno );

    if ( letter ) {

      letter.innerHTML = show ? text2beshown[ loc ].charAt( lno ) : ' ';

      lno++;

      if ( lno < text2beshown[ loc ].length )

        setTimeout( function() {

          showLetter( loc, lno, show )

        }, show ? 300 : 1 );

     } else {

       alert( 'Not found: td_' + loc + '_' + lno );

     }

  }

 

  function showIt( loc ) {

    showLetter( loc, 0, 1 );

  }

 

  function hideIt( loc ) {

//  alert( 'hideIt(' + loc + ')' );

    showLetter( loc, 0, 0 );

  }

 

  function show2( loc ) {

//  alert( 'show2()');

    showLetter( loc, 0, 1 );
 

    window.setTimeout(function(){

      showLetter( ++loc, 0, 1 );

    }, 300 * text2beshown[ loc ].length );

  }
 

  function hide2( loc ) {

//   alert( 'hide2()');

      showLetter( loc, 0, 0 );
 

      window.setTimeout( function() {

        showLetter( ++loc, 0, 0 );

      }, 1 )

  }

</script> 
 

</head> 

<body> 
 

<!-- abcdefg-xyz --> 

  <table> 

    <tbody> 

      <tr> 

        <script type="text/javascript"> 

          for(var i=0;i<text2beshown[0].length;i++ ){

            document.write('<td><span id="td_0_'+i+'"> </span></td>');

          }

        </script> 

      </tr> 

    </tbody> 

  </table> 
 

  <form> 

    <input value="Display" style="margin-right: 15px;" name="name1" onclick="showIt(0)" type="button"> 

    <input value="Reset" name="name2" onclick="hideIt(0)" type="button"> 

  </form> 

 

<!-- beginning of rectangle --> 

<div id='rect'> 

  <table> 

    <tr> 

      <script type="text/javascript"> 

        for( var i=0;i<text2beshown[2].length;i++ ){

          document.write('<td><span id="td_2_'+i+'"> </span></td>');

        }

      </script> 

    </tr> 

  </table> 
 

  <table> 

    <tr> 

      <script type="text/javascript"> 

        for( var i = 0; i < text2beshown[ 3 ].length;i++ ) {

          document.write( '<td><span id="td_3_' + i + '"> </span></td>');

        }

      </script> 

     </tr> 

  </table> 
 

  <form> 

    <input value="Display" type="button" onclick="show2(2)"> 

    <input value="Reset" name="name2" onclick="hide2(2)" type="button">

  </form> 

</div> 

<!-- end of tampa --> 

 

<p><b>Problem</b>: In preceding rectangle, clicking 'Display', words will appear in the cells. Then clicking 'Reset', the word 'TAMPA' will go away first. Then nothing happens for a short time. Then the word 'FLORIDA' goes away. I like to see that after the 'TAMPA' goes, the 'FLORIDA' starts to go immediately rather than waiting for a short time. 

 

</p> 

 

<!-- california --> 

<table> 

  <tr> 

    <script type="text/javascript"> 

      for( var i = 0; i < text2beshown[ 1 ].length; i++ ) {

        document.write( '<td><span id="td_1_' + i + '"> </span></td>');

      }

    </script> 

  </tr> 

</table> 

 

<form> 

 <input value="Display" style="margin-right: 15px;" name="name1" onclick="showIt(1)" type="button"> 

 

<input value="Reset" name="name2" onclick="hideIt(1)" type="button"> 

 </form> 

 

<!--

function hide2(){

       lno=0;

       show=0;

       showLetter();

 

      window.setTimeout(function(){

            lno=0;

             show=0;

            loc++;

             showLetter();

      },10)

} 

--> 

 

</body> 

</html>

Open in new window

0
 

Author Closing Comment

by:fuli3665
ID: 31602606
wonderful coding.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24840627
Thank you for the kind words.

This was an interesting question/idea.

Thanks for that, as well as the grade & points.

Good luck & have a great day.
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

Suggested Solutions

Title # Comments Views Activity
Select2 jquery help 9 74
Stupid git question 2 58
help with PowerShell script for registry permissions 8 47
remove background quote mark from widget 6 18
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

919 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

19 Experts available now in Live!

Get 1:1 Help Now