Simple Tagcloud

by Dirk Dörflinger

HTML

<script src="http://www.doerflinger.org/js/jquery.plugin.min.js"></script>
<script src="http://www.doerflinger.org/js/jquery.timer.min.js"></script>
<div id="main">
    <div id="cloud"></div>
    <div id="cloudcontent"></div>
</div>

<div id="content">
    <h2>Here goes the main content</h2>
<h3>Cats</h3>
<div>
    <dt>
        <dt name="Loud Roaring Carnivore Cat Stripes">Tiger</dt>
        <dd>Big, striped cat</dd>
        <dt name="Loud Brown Roaring Carnivore Maned Cat">Lion</dt>
        <dd>Big hairy king of the road</dd>
        <dt name="Cat Brown">Lynx</dt>
        <dd>Not just a browser</dd>        
    </dt>
</div>
    <h3>Birds</h3>
<div>
    <dt>
        <dt name="Carnivore Bird Neck Brown">Vulture</dt>
        <dd>Quite ugly meateating big bird</dd>
        <dt name="Cute White Bird">Dove</dt>
        <dd>Sign of love or peace or something</dd>
        <dt name="Bird Small Brown">Sparrow</dt>
        <dd>Rather this than a snail!</dd>
    </dt>
</div>
</div>

CSS

body {
    font-family: Verdana,Arial,sans-serif;
}

#main {
    width: 100%;
    overflow: auto;
    height: 150px;
    border-bottom: 1px solid #CCC;
}

#content {
    width: 100%;
}

#cloud {
	width: 48%;
	float: left;
}

#cloudcontent {
	width: 48%;
	float: right;
}

#cloud span {
	font-weight: bold;
	display: inline;
}

#cloudcontent dt{
	font-weight: bold;
}
#cloudcontent dd{
	margin-bottom: 3px;
}

.size-1 {
	font-size: 90%;
	color: #CCCCCC;
}
.size-2 {
	font-size: 100%;
	color: #CCCCCC;
}
.size-3 {
	font-size: 110%;
	color: #BBBBBB;
}
.size-4 {
	font-size: 120%;
	color: #BBBBBB;
}
.size-5 {
	font-size: 130%;
	color: #AAAAAA;	
}
.size-6 {
	font-size: 140%;
	color: #AAAAAA;
}
.size-7 {
	font-size: 150%;
	color: #999999;
}
.size-8 {
	font-size: 160%;
	color: #999999;
}

JavaScript

function tagcloud() {
	var tags = {};
	$( "dt" ).each(function( index ) {
		if ( $( this ).attr ( "name" ) ) {
			$.each( $( this ).attr( "name" ).split (" " ), function( index, value ) {
				if ( !( value in tags) ) {
					tags[ value ] = 1;
				}
				else {
					tags[ value ]++;
					
				}
			});
		}
	});
	$.each( tags, function ( name, count ) {
		if ( count > 8 ) count = 8;
		$("#cloud").append("<span class='cloudelement size-" + count + "' id='" + name + "'>" + name + "</span> ");		
	});

	$('.cloudelement').mouseover( function() {
		$("#cloudcontent").empty();
		$("#cloudcontent").append( "<dl> ");
	    $( "dt[name~='" + $( this ).html() + "']" ).each( function ( index ) {
		   $("#cloudcontent").append( "<dt>" + $( this ).parent().prev().html() + ", " +
		   							$( this ).html() + "</dt>" );
		   $( "#cloudcontent" ).append( "<dd>" + $( this ).next().html() + "</dd>" );
	    });
		$("#cloudcontent").append( "</dl>");
		$('#cloudcontent').timer( 'start' );
	});

}



	tagcloud();

	$('#cloudcontent').timer({
		delay: 4000,
		repeat: false,
		callback: function( index ) {
			$( "#cloudcontent" ).fadeOut( "slow", function() {
				$("#cloudcontent").empty();
				$("#cloudcontent").show();

				$('#cloudcontent').timer( 'stop' );	            
			});
        }
    });