Monday, May 5, 2008

Add Javascript to PBwiki

More and more hosted web environments are allowing you to add javascripts to your pages - and that includes PBwiki (more posts about PBwiki). The only problem you will run into is that you will have to do some editing in the "Source" (code) view, which can be a little bit intimidating at first, although it's really not that hard! Here are some instructions that explain how to do this at PBwiki.

First, you need to get the javascript code that you will be using. For example, if you are getting a javascript widget from SchoolhouseWidgets.com, you will cut-and-paste the contents of the script as shown in the box.



Get ready by opening the SchoolhouseWidgets.com page in one browser window, while you will have your PBwiki page open in the other window.

Then, you need to decide where you will want to place the javascript in your PBwiki page. Because the javascript itself is invisible in editing mode, it's a good idea to either put the javascript in-between two horizontal lines, or in the cell of a table. The instructions provided below show how you would insert the javascript in-between two lines.

First, create your two horizontal lines in the regular PBwiki editing page. The result will look like this:



Then, click on the SOURCE button to see the code. What you want to do is to paste the javascript code in-between the two tags that read <hr>, which stands for "horizontal rule". Here is what the two tags look like in the code view:



Here is what it looks like AFTER I paste in the javascript code that I have cut-and-pasted from SchoolhouseWidgets.com. Notice that I did not delete the horizontal rule tags; I just pasted in the script in-between the two tags. You will probably want to click on this image to get a full view:



Now, I can click on the SOURCE button again to switch back to the design view - but the javascript will not display. Don't worry: you know the script is there in-between the two horizontal lines. To see your code in action, click SAVE. When the page comes up in the browser, the results of the javascript will display:



Finally, PBwiki offers people the option to turn javascripts on or off. So, if your javascript is not displaying correctly, check down at the bottom of the page, and make sure that javascripts are turned ON.




Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.