Click here to Skip to main content
11,790,021 members (46,187 online)
Click here to Skip to main content

Tag Cloud with jQuery Effect

, 7 Mar 2010 CPOL 65.2K 1.1K 43
Rate this:
Please Sign up or sign in to vote.
Tag Cloud WebControl built on the Star Field jQuery plug-in

Table of Contents


In this article, I'd like to share a Tag Cloud web control with a star filed jQuery effect. The jQuery plug-in itself was not written by me. You can find the plug-in on [1]. I just wrapped an existing plug-in into a web control in order to be used as quickly as possible for developers who want to avoid the JavaScript. I realize what I have done in this article is not too much, but I still think it could be very useful. Basically, you don't need to touch JavaScript to reach the effect. It is all wrapped for you in a Web Control. As you will see further, you can use it by writing just a few lines, and the effect is quite impressive.

I want to thank the author (BUG SOFTWARE) for this jQuery plug-in.

Live Demo

I'm using this Tag Cloud on my personal page in the right column. You can see it here.

Example of Use

The example is included in the download package, and it's very intuitive. Despite its simplicity, I'll describe the way to use it. It is just about adding a control into a page and filling it with some data. Download the code attached to this article, reference the library DotNetSources_e0004.dll in your web app, and register the control in web.config:

<add tagPrefix="dns" namespace="DotNetSources.Web.Core.Controls" 
Listing 1 - Register control namespace

... and use it:

<dns:Tagcloud runat="server" Id="myCloud" Width="400" Height="500" />
Listing 2 - Define a control in a page

Take a note of Width and Height. They must be set to some values; otherwise the control will have the size 0;0. The used jQuery plug-in works fine in any size of the Tag Cloud. Try it and see the effect.

Of course, you have to provide data which will be displayed by the Tagcloud. You can do it in any phase of the page-life cycle between Page_Load and OnPreRender included. In the following listing, you can see the code to bind the data.

List<Tag> tags = new List<Tag>();
tags.Add(new Tag() { Link = "#", Text = ".NET" });
tags.Add(new Tag() { Link = "#", Text = "ASP .NET" });
tags.Add(new Tag() { Link = "#", Text = "JavaScript" });
tags.Add(new Tag() { Link = "#", Text = "WCF" });
tags.Add(new Tag() { Link = "#", Text = "WPF" });
tags.Add(new Tag() { Link = "#", Text = "Silverlight" });
tags.Add(new Tag() { Link = "#", Text = "Web" });
tags.Add(new Tag() { Link = "#", Text = "C#" });
tags.Add(new Tag() { Link = "#", Text = "VB.NET" });
tags.Add(new Tag() { Link = "#", Text = "Visual Studio" });

myCloud.Tags = tags;
Listing 3 - Binding a data to Tag Cloud instance
Note: The control requires the jQuery library to be loaded. So, make sure you have a reference to the jQuery library in your page.

Example of use - Parameterization

You could consider the TagCloud to be too fast, too slow or whatever then you can customize it by the properties exposed on the web control. The following table describes the collection of properties you can use for customizing the behavior. The control does not provide any validation for input values, thus, if you set crazy values to the properties, you get a crazy behavior of the TagCloud. You have to simply try what is suitable for you.

Property Dafault Value Description
Interval 50 Interval between animation frames.
Xpos .5 X pos of where our tags 'fall' from.
Ypos .5 Y pos of where our tags 'fall' from.
Gravity -10 Force of gravity acting to drag Items towards the screen - changing negative / positive changes direction of the 'fall'.
HoverGravityFactor -1 Gravity amount when user hovers over the tag cloud - works a multiplier of opts.gravity
GravityVector 0,0,1 3D vector direction of gravity.
Range -200,300 Range to fall between - the lower the number the closer to the screen.
Table 1 - Table of properties for Tagcloud control

Tip: Stop Animation When Mouse Hover

To stop animation when mouse hover, just set the property HoverGravityFactor to 0.

<dns:Tagcloud runat="server" Id="myCloud" Width="400" Height="500" 
            HoverGravityFactor="0" />
Listing 7 - How to stop animation when mouse hover.


The Tagcloud control is created as a web control with client-side capabilities. For a detailed description of this type of control, please read my previous article [2]. The Tagcloud control automatically registers all the JavaScript resources needed for the animation, except the jQuery library. As mentioned earlier, the jQuery loading is up to you in order to be free to choose the version of jQuery. I also mentioned that the control is very easy to use; therefore, I introduced the entire code in Listing 4.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
using DotNetSources_e0004.Model;
using System.ComponentModel;
using System.Collections;

[assembly: WebResource("DotNetSources_e0004.Controls.Tagcloud.jquery.engine3D.js", 
		"text/javascript", PerformSubstitution = true)]
[assembly: WebResource("DotNetSources_e0004.Controls.Tagcloud.jquery.particlePhysics.js", 
		"text/javascript", PerformSubstitution = true)]
[assembly: WebResource("DotNetSources_e0004.Controls.Tagcloud.jquery.starfieldTagCloud.js", 
		"text/javascript", PerformSubstitution = true)]
[assembly: WebResource("DotNetSources_e0004.Controls.Tagcloud.Tagcloud.js", 
		"text/javascript", PerformSubstitution = true)]

namespace DotNetSources.Web.Core.Controls
    public class Tagcloud : WebControl, IScriptControl
        #region Options for TagCloud

        private int interval = 50;

        /// <summary>
        /// Interval between animation frames.
        /// Default: 50
        /// </summary>
        public int Interval {
            get {
                return interval;
            set {
                interval = value;

        private double xpos = .5;

        /// <summary>
        /// x pos of where our tags 'fall' from
        /// Default: .5
        /// </summary>
        public double Xpos {
            get {
                return xpos;
            set {
                xpos = value;

        private double ypos = .5;

        /// <summary>
        /// y pos of where our tags 'fall' from
        /// Default: .5
        /// </summary>
        public double Ypos {
            get {
                return ypos;
            set {
                ypos = value;

        private int gravity = -10;

        /// <summary>
        /// Force of gravity acting to drag 
        /// Items towards the screen - changing negative / positive changes 
        /// direction of the 'fall'
        /// Default: -10
        /// </summary>
        public int Gravity {
            get {
                return gravity;
            set {
                gravity = value;

        private int hoverGravityFactor = -1;

        /// <summary>
        /// Gravity amount when user hovers over the tag cloud - works a multiplier 
        /// of opts.gravity
        /// Default: -1
        /// </summary>
        public int HoverGravityFactor {
            get {
                return hoverGravityFactor;
            set {
                hoverGravityFactor = value;

        private string gravityVector = "0,0,1";

        /// <summary>
        /// 3D vector direction of gravity. 
        /// Default [0,0,1]
        /// </summary>
        public string GravityVector {
            get {
                return gravityVector;
            set {
                gravityVector = value;

        private string range = "-200,300";

        /// <summary>
        /// 2D vector.
        /// Range to fall between - the lower the number the closer to the screen.
        /// Default [-200,300]
        /// </summary>
        public string Range { 
            get { 
                return range; 
            set { 
                range = value; 


        public Tagcloud()
            : base(HtmlTextWriterTag.Div)

        public IEnumerable<Tag> Tags { get; set; }

        ScriptManager sm;

        protected override void OnPreRender(EventArgs e)
            if (!this.DesignMode)
                sm = ScriptManager.GetCurrent(Page);

            Literal lit = new Literal();
            if (Tags == null)
                throw new Exception("Fill the Tag property.");
            StringBuilder sb = new StringBuilder();
            foreach (Tag tag in Tags)
                sb.AppendFormat("<li><a href='{0}'>{1}</a></li>", tag.Link, tag.Text);
            lit.Text = sb.ToString();

        /// <summary>
        /// <summary>
        /// <param name="writer"></param>
        protected override void Render(HtmlTextWriter writer)
            if (!this.DesignMode)

        #region IScriptControl Members

        public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            ScriptControlDescriptor descriptor =
              new ScriptControlDescriptor("DotNetSources.Tagcloud", this.ClientID);
            descriptor.AddProperty("options", BuildOptions());
            return new ScriptDescriptor[] { descriptor };

        public IEnumerable<ScriptReference> GetScriptReferences()
            List<ScriptReference> ret = new List<ScriptReference>();
            ScriptReference jsReference = new ScriptReference();
            jsReference.Assembly = "DotNetSources_e0004";
            jsReference.Name = "DotNetSources_e0004.Controls.Tagcloud.jquery.engine3D.js";
            jsReference = new ScriptReference();
            jsReference.Assembly = "DotNetSources_e0004";
            jsReference.Name = 
            jsReference = new ScriptReference();
            jsReference.Assembly = "DotNetSources_e0004";
            jsReference.Name = 
            jsReference = new ScriptReference();
            jsReference.Assembly = "DotNetSources_e0004";
            jsReference.Name = "DotNetSources_e0004.Controls.Tagcloud.Tagcloud.js";
            return ret.ToArray();


        private Hashtable BuildOptions()
            Hashtable table = new Hashtable();
            table.Add("interval", Interval);
            table.Add("xPos", Xpos);
            table.Add("yPos", Ypos);
            table.Add("gravity", Gravity);
            table.Add("hoverGravityFactor", HoverGravityFactor);
            table.Add("gravityVector", GetVector(GravityVector));
            table.Add("range", GetVector(Range));
            return table;

        private int[] GetVector(string value)
                List<int> ret = new List<int>();
                string[] tmp = value.Split(',');
                foreach (string s in tmp)
                return ret.ToArray();
            catch (Exception ex)
                throw new Exception(
                    "The vector " + 
                    value + 
                    " is in the wrong format. 
		 Should be the collection of numbers splitted by ','.", 

Listing 4 - Tagcloud control

I hope there is nothing complicated in Listing 4. If you don't understand any piece of code, please read [2]. The JavaScript class of Tagcloud is also very simple. It just executed the Star Field Tag cloud plug-in when the page is loaded. See the JavaScript class in Listing 5.


DotNetSources.Tagcloud = function(element) {
    DotNetSources.Tagcloud.initializeBase(this, [element]);

    // fields
    this._options = null;

    // handlers
    this._onClickHandler = null;

DotNetSources.Tagcloud.prototype = {

    initialize: function() {
        DotNetSources.Tagcloud.callBaseMethod(this, 'initialize');
        var t = $('#' + this.get_id());

    get_options: function() {
        return this._options;

    set_options: function(value) {
        this._options = value;

    dispose: function() {
        //Add custom dispose actions here
        DotNetSources.Tagcloud.callBaseMethod(this, 'dispose');
DotNetSources.Tagcloud.registerClass('DotNetSources.Tagcloud', Sys.UI.Control);
Listing 5 - The Tagcloud JavaScript class

Points of Interest

This WebControl could also show you the easy way to extend a WebControl of jQuery plug-in. Basically you can apply it to any jQuery plug-in you find on the internet.


Thank you for reading. I hope it was useful for you. As usual, I'm interested in feedback, so don't hesitate to write a comment or vote. Thank you very much.



  • 1 March 2010
    • Initial release
  • 6 March 2010
    • Code changes
      • Parameterization of animation added
      • Option to stop the animation added
    • Text changes
      • Description of parameterization
      • Sample code updated


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Petr Pechovic
Software Developer (Senior)
Czech Republic Czech Republic

You may also be interested in...

Comments and Discussions

GeneralHow can i change the text that is displayed ? Pin
Member 775503424-May-11 23:46
memberMember 775503424-May-11 23:46 
GeneralRe: How can i change the text that is displayed ? Pin
Petr Pechovic25-May-11 3:52
memberPetr Pechovic25-May-11 3:52 
NewsLive Demo! Pin
Petr Pechovic12-Apr-10 7:16
memberPetr Pechovic12-Apr-10 7:16 
GeneralGreat work Pin
Brij19-Mar-10 5:31
mentorBrij19-Mar-10 5:31 
GeneralRe: Great work Pin
Petr Pechovic19-Mar-10 10:25
memberPetr Pechovic19-Mar-10 10:25 
GeneralGood work Pin
Anurag Gandhi15-Mar-10 16:47
memberAnurag Gandhi15-Mar-10 16:47 
GeneralRe: Good work Pin
Petr Pechovic15-Mar-10 23:32
memberPetr Pechovic15-Mar-10 23:32 
GeneralWell done Pin
Katka Vaughan11-Mar-10 3:26
memberKatka Vaughan11-Mar-10 3:26 
GeneralRe: Well done Pin
Petr Pechovic11-Mar-10 3:55
memberPetr Pechovic11-Mar-10 3:55 
GeneralNice one! Pin
Daniel Vaughan3-Mar-10 1:17
mvpDaniel Vaughan3-Mar-10 1:17 
GeneralRe: Nice one! Pin
Petr Pechovic3-Mar-10 3:45
memberPetr Pechovic3-Mar-10 3:45 
GeneralCool Pin
mengmakies2-Mar-10 4:43
membermengmakies2-Mar-10 4:43 
GeneralRe: Cool Pin
Petr Pechovic2-Mar-10 5:05
memberPetr Pechovic2-Mar-10 5:05 
GeneralToo fast Pin
Krunal Mevada1-Mar-10 18:42
memberKrunal Mevada1-Mar-10 18:42 
GeneralRe: Too fast Pin
Petr Pechovic1-Mar-10 21:28
memberPetr Pechovic1-Mar-10 21:28 
AnswerRe: Too fast Pin
Svetlin Panayotov4-Mar-10 3:19
memberSvetlin Panayotov4-Mar-10 3:19 
GeneralRe: Too fast Pin
Petr Pechovic4-Mar-10 5:06
memberPetr Pechovic4-Mar-10 5:06 
AnswerRe: Too fast Pin
Petr Pechovic7-Mar-10 21:07
memberPetr Pechovic7-Mar-10 21:07 
GeneralNice! Pin
Marcelo Ricardo de Oliveira1-Mar-10 17:20
memberMarcelo Ricardo de Oliveira1-Mar-10 17:20 
GeneralRe: Nice! Pin
Petr Pechovic1-Mar-10 21:25
memberPetr Pechovic1-Mar-10 21:25 
GeneralGood one ! Pin
Abhijit Jana1-Mar-10 16:49
mvpAbhijit Jana1-Mar-10 16:49 
GeneralRe: Good one ! Pin
Petr Pechovic1-Mar-10 21:23
memberPetr Pechovic1-Mar-10 21:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1509028.1 | Last Updated 8 Mar 2010
Article Copyright 2010 by Petr Pechovic
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid