TagCanvas options

« Return to TagCanvas page

Skip to:

• Stand-alone version
• jQuery version
• Options list

There are a number of options for modifying the way the cloud looks and behaves. This page explains how to set the options for your clouds to use and provides a list of all the available options.

Specifying options

There are two ways of specifying options for the stand-alone version of TagCanvas, and just the one way to set options for the jQuery plugin version.

Stand-alone - class variables

The first method for setting options is to set the corresponding class variables before calling the Start function:

<script type="text/javascript">
 window.onload = function() {
  // set colour of text and outline of active tag
  TagCanvas.textColour = '#ffffff';
  TagCanvas.outlineColour = '#ff9999';
  TagCanvas.Start('myCanvas');
 };
</script>

Using this method multiple tag clouds on the same page will share the same set of options.

Stand-alone - options array

The second way to configure the stand-alone version is to pass in the required options to the Start function as an array of name: value pairs in the third argument:

<script type="text/javascript">
 var options = {
  textColour: '#fff',
  textHeight: 20,
  depth: 0.99
 };
 window.onload = function() {
  // use internal link list, so second argument is ''
  TagCanvas.Start('myCanvas', '', options);
 };
</script>

I use the word "array" in its more generic sense here - the { x: y } syntax actually creates an unnamed Javascript object.

If you are using multiple clouds on a page, you could use both of the above methods at the same time - set the options that you want for all your clouds to share using class variables, then pass in the different options for each cloud as arrays.

jQuery - options array

For the jQuery plugin version of TagCanvas, the first method of setting options used by the standalone version is not available, so you must pass all the relevant options into the tagcanvas function using the array method:

<script type="text/javascript">
 $(document).ready(function() {
   $('#myCanvas').tagcanvas({
     textColour : '#ffffff',
     outlineColour : '#ff9999'
   });
 });
</script>

The options array is the first argument to the jQuery plugin function, as it gets the canvas details from the jQuery selector.

Options list

The following table lists all the options that are available in the latest version of TagCanvas.

When specifying an option the option name does not need to be in quotes. The value should be quoted with single or double quotes unless it is a number, an array or the Javascript keywords true, false or null.

The default values for each option are shown in the second column of the table below.

• ^[1]Added in version 1.7, this option is set for all TagCanvases on a page when the first is started (they all use the same interval timer). In previous versions the interval was fixed at 10 milliseconds. If your cloud seems to be very jerky, try increasing this to 40.
• ^[2]For examples of using these options, see the multiple font and colour page.
• ^[3]A description of the tooltip options is on the TagCanvas 1.14 page.
• ^[4]For more information about the weighting options, see the TagCanvas with weighted tags page.

« Back to top of page Weighted tags »

Copyright © 2021, Goat 1000