var arr = Array('that','that','that','test','test','this','this','this','this');
document.write(tagCloud(arr));
that is the screenshot.
go ahead and change the maxsize and minsize according their obvious respective values.
also easy to edit styles:
end+="<span style='font-size:"+s+"'>"+r+"</span>";
can become any style you want. ex:
end+="<ul><li style='font-size:"+s+";color:#333;' onmouseover='this.style.color=\"#cc0000\"' onmouseout='this.style.color=\"#333\"'>"+r+"</li></ul>";
as ie doesnt support foreach, you need have to include this:
if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}
^^code from Mozilla Development Center
function tagCloud(tags) {
//set max font-size
var maxsize = 44;
//set min font-size
var minsize = 9;
//preset variables as to create no confusion
var tag=new Array(), ta=new Array();
var cloud='', h=0, val=0, i=0;
//proccess given tag array
//counting the accurances of tags
tags.forEach(function(t){
//current tag has already been recognized
if (tag[t]) {tag[t]++;}
//current tag hasn't been recognized
else{tag[t]=1;ta[i++]=t;}
});
//find the highest amount of tag accurances in the form of a number
ta.forEach(function(g){
//if the current tag count is higher than the current highest, it is the current highest.
if (tag[g] > h) {h=tag[g];}
});
val=(maxsize/h);//get the font-size interval needed to vary sizes
ta.forEach(function(r){//set the size of the current tag by multiplying the interval by the amount of times the tag is used.
//set the size, if it is smaller than the minimum font-size, it is the minimum font-size.
var s=(Math.round(val*tag[r])>minsize) ? Math.round(val*tag[r]) : minsize;
//concatenate finished styled tag into cloud
cloud+="<span style='font-size:"+s+"'>"+r+"</span>";
});
//return cloud.
return cloud;
}