Worship Day On-Air Javascript

These instructions are specific to the FinalWeb service; however, the only FinalWeb specific instructions are related to the image upload and how to insert the JavaScript on a page. You can easily adjust those instructions to your circumstance for your server. As long as you can insert the enclose JavaScript on your page you can use these instructions. To the right is an example of the block that inserts on the welcome page. The image and the text does not appear the remainder of the week.

Prepare the Clip Art Instructions

You first will need to upload the clip art that the code uses, this will be uploaded to the file manager for your site. You will not upload it to the page directly. This image then is also available on any page in your site that you want to use this code.

1. Find a copyright free or legally usable icon that you wish to use for your on-air message. Save it to your local computer hard drive in a name you want to share on the web. The file name will be seen in the HTML of your page, so it should be something benign like on-air-clipart.png etc.
2. Access the administrative functions of FinalWeb using your administration username and password.
3. With the admin tools, click into the Site Manager option.
4. Click on Tools and then File Manager in the left hand menu.
5. The first level of your file manager will open in the main pane to the right, click then on images to open into the images folder.
6. Click Upload Files to begin the upload process. You will be walked thru the process and it should end with a successful green check mark.
7. The page will refresh and the file does not appear on that page when it does. You will need to click on File Manager on the left and then again on images on the right. This time you will find that you file does appear in the list.
8. Click on the Preview File button that is associated with your file name you uploaded. A new tab in your browser will open and you will see the image you uploaded. You will need this URL later, so take note of the enter URL now by copying it to your notepad or keep the tab open.

Setting Up Your JavaScript on the Page

Hint: you should create a sandbox page to play in when you are learning JavaScript. You can easily blow up the page and perhaps not even be able to access the administration tools that FinalWeb provides.

Find the location that you wish to insert this on your page. In the case of our homepage the calendar is in a column that cannot have sections added to them. Adding a section just for this JavaScript is better, but it really depends on the provided template your church may be using.

Access your content block and get into the text editing mode. Don't use the double click method, use the configure section or edit column function.

Click on the Source button in the upper right hand corner.

Find in the HTML code the place that you want to insert your icon and message. The exact point in the code is where this script is going to insert your text.

Copy and paste from the code block below to the editor where you want to insert your block.

Make changes to the code to include the URL you noted in the setup of the clip art above. Change the message also if you wish your own phrase. Change the getHours and getDay to match what you want to match in your logic.

Click Save Changes to save your website and test. You may need to use artificial day of weeks and time.

JavaScript Code Block

The provided is between 7AM and 12PM Sunday and 6PM to 9PM on Wednesday. getDay starts at 0 for Sunday and goes through 6 for Saturday. Since this runs on your computer browser side, not server side, then the timezone and date of the local computer is already considered. Replace the XXXXXXXXXXXXXXX in the block below with the URL you created in the clip art section above.

<!-- -- insert live streaming details here on Sunday & Wednesday service times ---->

<SCRIPT type="text/javascript"> 

today=new Date()

if (((today.getHours() >= 7 && today.getHours() < 12) && (today.getDay() == 0)) ||

         ((today.getHours() >= 18 && today.getHours() < 21) && (today.getDay() == 3)))

{

document.write('<DIV style="text-align: center;"><IMG SRC="XXXXXXXXXXXXXXX"><P></DIV><DIV style="text-align: center;"><A HREF="/stream">Live video streaming</A> available from each of our worship services.</DIV>');

}