Instructions for inserting the countdown timer code in iWeb ’06 (version 1.x)

 

• In iWeb, go to the page into which you want to insert the timer script.

  1. •Create a new text box where you would like the countdown timer to be displayed.  

  2. -You will insert the script into this textbox AFTER publishing the page from iWeb.  Type something unique, such as “countdowntimer” inside this text box.  Make this textbox a little larger than the size of the countdown timer (you can drag a corner to resize it or use the inspector—>metrics pane to resize and position it).

  3. ‣Size of Style 1A (as shown here):  width: 400px; height: 68px

  4. ‣Size of Style 1B (as shown here):  width: 406px; height: 76px

  5. ‣Size of Style 1C (as shown here):  width: 400px; height: 69px

  6. ‣Size of Style 1D (as shown here):  width: 414px; height: 94px

  7. ‣Size of Style 2A (as shown here):  width: 664px; height: 37px

  8. ‣Size of Style 2B (as shown here):  width: 582px; height: 42px

  9. ‣Size of Style 3A (as shown here):  width: 480px; height: 55px

  10. ‣Size of Style 3B (as shown here):  width: 464px; height: 59px

  11. -While the text box is selected, use the Inspector—>Text pane to align the text to the center and set the Spacing as follows: Character: 0%; Line: 0.01 (slider all the way to the left); Before Paragraph: 0 pt; After Paragraph: 0 pt; Inset Margin: 0 pt.

• Publish your revised page.

  1. •Open your published page using a text editor (I use TextWrangler, a freeware text editor, but one can also use TextEdit—just make sure that “Ignore rich text commands in HTML files” is checked in the TextEdit Open and Save preferences).

  2. •Find “countdowntimer” in the HTML file that you just opened with the text editor and replace it with the entire script as posted in the pages showing each timer style.  After you’ve copied it into the HTML file, you can change the font, color, etc.

  3. •Make sure you edit the two other areas of the script to define your target date/time and the message to display once the target date/time is reached at the sections preceded by //-->

  4. -var current=”  “ — Insert inside the quotations what to display when the target date and time are reached.

  5. -countdown( ) — Insert inside the parentheses the target date and time (format: full-year,month,day,hour [24 hour based, i.e., 5 PM is 17],minute)

• Save the file.

 

That’s it!  Hope it’s clear enough.  Any questions, feel free to e-mail me at rkuhnhenn@mac.com