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

 

NOTE:  Links to the codes for each timer style are below these instructions.

• 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 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: 48px

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

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

  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: 594px; height: 38px

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

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

  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. •Copy the code from step 1, as posted in the pages showing each timer style, into the head element (between <head> and </head>) of the HTML code that you just opened with the text editor.

  3. •Find “countdowntimer” in the HTML file and replace it with the script from step 2, as posted in the pages showing each timer style.

  4. •Do step 3 as posted in the pages showing each timer style.

  5. •For timer style 1D, download the two images as explained in step 4 of the instructions on that timer's page.

  6. •After you’ve done the above, you can change the font, color, etc., by changing the values in the CSS coding that you copied into the head element.

  7. •Make sure you edit the 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 indicated

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

  9. -var year=                –– Enter the count down target date YEAR

  10. -var month=             –– Enter the count down target date MONTH

  11. -var day=                 –– Enter the count down target date DAY

  12. -var hour=                –– Enter the count down target date HOUR (24 hour clock)

  13. -var minute=            –– Enter the count down target date MINUTE

  14. -var tz=                    –– Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

  15. •Save the file.  You will need to repeat the above steps every time that you subsequently publish your page from iWeb if you make any changes to that page!

 

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

Style 1a

Style 2a

Style 2b

Style 1b

Style 3a

Style 3b

Get the code

Get the code

Get the code

Get the code

Get the code

Get the code

Style 1c

Get the code

Style 1d

Get the code