Getting Started

Getting started with TagSphere is pretty simple. The first thing you need to do is download the tagsphere.js and tagsphere.css files. Then you can link them in your source code:

<script src="tagsphere.js"></script>
<link rel="stylesheet" href="tagsphere.css">

Next, you need to place a holder for the tagsphere somewhere in your code. Within this holder, you can put your list.

<div id="tagsphere-holder1" class="tagsphere-holder">
	<ul class="tagsphere">
		<li><a href="http://google.com">Google</a></li>
		<li><a href="http://www.yahoo.com/">Yahoo!</a></li>
		<li><a href="http://www.bing.com/">Bing</a></li>
		<li><a href="http://www.faroo.com/">FAROO</a></li>

Finally, you just need to initialize tagsphere.

	$tagsphere("tagsphere-holder1", {size:60, smallestsize:22, biggestsize:16});

The syntax of creating a tagsphere object is fairly simple:

$tagsphere(id of holder[, options, callback]);

Note: Options 'size', 'smallestsize', and 'biggestsize' are recommended as minimal settings.


TagSphere can use some options to configure how the object looks and acts.

Using JSON

TagSphere can be configured to use properly formatted JSON data from an external URL. The URL should be supplied to options.extjson, and the data should be in the format:

		"type": "onclick" or "href",
		"tag": "[tag text]",
		"url": "[url or link action]"

Build a TagSphere Instance

  • options.border -
  • options.bordercolor -
  • options.backgroundcolor -
  • options.tag.font -
  • options.tag.borderstyle -
  • options.tag.backgroundcolor -
  • options.tag.borderwidth -
  • options.biggestsize -
  • options.smallestsize -
  • options.size -
  • options.mousespeed -
  • options.color -
  • options.refresh -

Setup String: