Remember the typing text example at the beginning of the tutorial? We'll now review that script. First, set up an input box:

<form>
      Type Text: <input type="text" name="TT" value="Ryan Rules!">
      &nbsp; <input type="button" value="Type Text">
      <input type="button" value="Stop!">
</form>

Then, create a layer

<div id="TL" style="position:absolute;font-family:Verdana;font-size:24px;text-align:center;color:blue"></div>

And now for the code:

<script>
      var interVal1, i=0;

      function typeIt(layerID,content){
            if(i==content.length){
                  i=0;
                  writeLayer(layerID,"");
                  return false;
            }else{
                  i++;
            }
            writeLayer(layerID,content.substr(0,i));
      }
</script>

What that code does is it takes a string (as the variable, content), and it writes it one letter of that string into the layer. Also, note how we use the variable, i. This will allow us to keep calling this function and it will run and keep typing out one more letter at a time. Now, here's the function we're going to call to run this script.

<script>
      function typeLayer(layerID,content){
             writeLayer(layerID,'');
            i=0;
            interVal1=setInterval("typeIt('"+layerID+"','"+content+"')",300);
      }
</script>

This function first blanks out any previous content we had in the layer. Then, it resets the variable, i, to 0. To stop writing, we would clearInterval(interVal1). With the event handlers calling these functions, our form would now look like:

<form>
      Type Text: <input type="text" name="TT" value="Ryan Rules!">
      &nbsp; <input type="button" value="Type Text" onclick="typeLayer('TL',document.forms[0].TT.value)">
      <input type="button" value="Stop!" onclick="clearInterval(interVal1)">
</form>

And now, here's what the final script looks like in action: Example 8

Note that in Netscape Navigator 4, the color of the new text is not blue 24px Verdana. NN4 does not
dynamically access a layer's CSS properties like that. To style the text, we would have to write the HTML code into the layer. Here's how we could make it so Netscape 4 continues to have that "style":

      function typeIt(layerID,content){
            if(i==content.length){
                  i=0;
                  writeLayer(layerID,"");
                  return false;
            }else{
                  i++;
            }
            writeLayer(layerID,'<span style="font-family:Verdana;font-size:24px;text-align:center;color:blue">'+content.substr(0,i)+'</span>');
      }

Challenge

Now that we've finished that script, it's time for me to issue a challenge. Writing content to a layer isn't such a hard concept to grasp. Our next script is going to combine some of your old JavaScript skills with the new skills you've learned in this tutorial. What I want you to do is to create an image slideshow script. However, this should not just be any image slideshow. I want to be able to have a place to write comments for each picture (this will be done with dynamically rewriting a layer). The script should have an auto button (will automatically change the image/comment after a certain time), a stop button (stop automatically advancing slideshow), a next button (will go to the next slide), and a previous button (will go to the previos slide). Also, we can rewrite the HTML code for an image in that same layer so that we can accept different sized images. Due to its length, this script will be posted heavily commented out.

Next -->