Using Pastelets

What is a pastelet?

A pastelet is simply something that you can cut and paste into your web page to make it do nifty things.

There are two kinds of pastelets on this site: beginner and advanced. The difference between them is simple: beginner pastelets require no programming, and advanced ones do.

How do I use pastelets?

Easy: follow the instructions!

Each pastelet functionality has at least two files associated with it on this site.

First, there is the demonstration page which shows off the effect. This is included for two reasons. First, so you can quickly determine if the pastelet does what you want, and second, so there is an implementation that you can refer to if you are having trouble getting a pastelet to work.

Second, there is a description of how to implement the effect. This usually contains pretty straightforward instructions, usually involving pasting HTML code into your web page somewhere. The most difficult part of the process is usually figuring out where in your web page to paste the pastelet, especially if you are using multiple pastelets in a page. This will take practice, patience, and trial and error if you are unfamiliar with or uncomfortable working with raw HTML code. Just be sure to save backup copies of your web pages before starting in on the pastelet experimentation.

Also in the description page is a section at the bottom entitled Warning: For Geeks Only. This section contains technical notes about the implementation of the effect. If you are at all interested in learning Javascript coding, be sure to read these!

What about the support files?

Some of the pastelets require 'support files.' Javascript has the ability to read code from other pages, which makes your web pages a lot easier to look at by not needing all that code on your page. You will need to include the support files on your web site, too, or the Javascript routines will fail because the computer can't find the code. If there is a support file, then it will be mentioned in the description page.

To use the support file, you will need to download it and put it in the same directory as the page that contains the pastelets. Chances are, you can't just click on it to see it, but you can always click-and-hold (on the Macintosh) or right-click (on the PC) on the link to the support file, and select 'Save link as...' to save the file to your hard drive.

What about non-Javascript browsers?

None of the files given here do the 'graceful degrading' for you, but they are set up to make doing so simple. All Javascript that appears in an HTML file is surrounded by the comment tags that hide the code from browsers that do not support Javascript, and most of the code is shunted off into external .js files. This means that all you have to do is insert <noscript> and </noscript> tags into your files to provide information for other browsers.

Are there any requirements for using these pastelets?

Yes.

Obviously, only browsers that are Javascript-savvy will be able to see the features you add to your page, but there are differences between the browsers. It's up to you to make sure that your pages work for your target audience. Although unlikely, there is no guarantee that these scripts won't mess up the page, delete your hard drive, or kill your house pets. In other words, use at your own risk.

Also, please give credit where credit is due. Provide a link to this site in an appropriate place with an appropriate credit line. It will do to say something to the effect of "Javascript coding courtesy C.C. Chamberlin's Pastelet Site" and providing a link to this site.

Finally, don't resell these pastelets. They are intended for your personal use, and are not for redistribution (although you can link to this site if you want to). Further, they are intended to entice you into learning Javascript, and wholesale cut-and-pasting, while handy, will only get you so far. Try to learn from these scripts and develop your own if you can.

Any downloads?

Yes.

There is an Quick JavaScript Effects PDF file that contains a printable version of the first two tricks.

Also, on the trick pages are links to the support files.