Plug-in Javascript Library

Plug-in Book

Robin Nixon has written a book called Plug-in Javascript.  It includes a Javascript library of basic functions that do things like fading images, rollover effects, etc.

There is a companion web-site at :  http://www.pluginjavascript.com/ 

1. Visit the web-site and click on Download Plug-ins .
   This contains all the sample web-pages and the library functions.
    
2. Try out some of the samples in chapter 6.  This is easier on the web-site, but you could also try the copies you downloaded from the zip archive.
    

    To use the library functions, you will need the following commands:

      <script src="PJ.js"></script>
      <script>Initialize()</script>

    Then you can use commands like:

      Slide("globe", 0, 100, 450, 0, 1500, 0)
   
    That means the "globe" image will Slide from (0,100) to (450,0), 
     and the trip takes 1500 milliseconds.
    The final zero (0) means that this trip cannot be interrupted -
      so an attempt to move the "globe" on a different trip will be rejected.

Using Slide

3.  Read the code in this example.  Then create your own page that has a picture
     moving across the screen from left to right.  

4.  Change your page so the pictture moves back from right to left
     when you click on it.

5.  Add several pictures that move (Slide) when you click on them.
     They should move in various directions.

6.  Add a picture in the middle.  When you click on the middle picture,
     all the other pictures should move around.

7.  Add a RESET button (a picture that says "reset") that puts all the other
     pictures back in their original positions.

Using a Timer

JavaScript provides a timer to control exactly when a command executes. 

Try this example and look at the code.

Suppose a JavaScript program says the following:

   Slide('globe',  0 , 250, 200,  0 , 500, 0)
   Slide('globe', 200,  0 , 400, 400, 500, 0)
   Slide('globe', 400, 400,  0 , 250, 500, 0)

We would expect the globe to move along 3 paths, ending up back where it started.  Unfortunately that does not happen - it only travels along the first path.

In JavaScript, the 2nd Slide command does not wait for the first one to finish.  It starts almost immediately.  The last 0 in the first command means "cannot be interrupted".  So the second command cannot actually move the globe and nothing happens.  It just gives up.  The 3rd command has already started just after the second, and it also gives up.

If you try to fix this by changing all the 0's to 1's, so that the 2nd and 3rd commands can move the globe, the result is a horrible mess and nothing useful happens.

We need to use setTimeout to cause these 3 commands to execute in order, one after another, without interfering with each other.  The correct commands look like this:

   Slide('globe',  0 , 250, 200,  0 , 500, 0)
   setTimeout("Slide('globe', 200,  0 , 400, 400, 500, 0)" , 600)
   setTimeout("Slide('globe', 400, 400,  0 , 250, 500, 0)" , 1200)

Notice the following:

• The last 600 in the 2nd command means that it waits 600 milliseconds before it starts executing.  In that time, it has already finished the 1st command before the 2nd starts.
• In the third command, the 1200 means that it starts executing 1200 ms after the script begins - that is 1200 ms after the first command started, allowing enough time for both the 1st and 2nd commands to finish.
• The original Slide commands must be surrounded by "quotation marks"

Now try the following:

#8 -  Make one of your pictures move in a square path - say 200 to the right, then down 200, then left 200, then up 200.

#9 - Change #6 above so that when you click the central picture, the other pictures move ONE AFTER ANOTHER.  Notice that the delay times (at the end of setTimeout) must ADD UP, so each later command has a bigger delay.

#10 - Make all the pictures travel in a round-trip (or square, or triangle) ending up in their original positions.