Solved

to make resetting smoother

Posted on 2009-07-12
5
254 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
Comment Utility
The requested document was not found on this server.
0
 

Author Comment

by:fuli3665
Comment Utility
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
Comment Utility
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
Comment Utility
wonderful coding.
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

744 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

15 Experts available now in Live!

Get 1:1 Help Now