skip to main | skip to sidebar

Tag-Cloudfor those who want or can only use JavaScript to convert regular tags list into a Tag-Cloud. jQuery and regular expressions are here to help.
Why Tag-Cloud? It is better looking and more meaningful.

Update:
Since Aug. 25, 2009: blogger now offers a built-in Tag-cloud. So you won't need this code for that job. still, jQuery manipulation is cool :)

Check demo :
click Reset to see tags original output.
click Get Cloudy 1 to convert it to Tag-Cloud without frequencies.
or click Get Cloudy 2 to convert it to Tag-Cloud with frequencies.


Code uses jQuery to manipulate and style those LI tags according to their frequencies, and regular expressions to extract the frequency contained in parentheses ().

Here is JavaScript code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
   function getTagsCloudy(placeHolderID,scale,percentClassPrefix,keepFreq,overwriteCSS){
      var list = $('#'+placeHolderID+' li');
      // overwrite CSS
      list.css(overwriteCSS);
      
      var max=0, min=0;
      //First pass : calc max and min
      list.each(function (i) {
         //extract and parse frequency
         freq = getTagFrequency($(this));
         //Calc max and min
         if (freq>max) max= freq;
         if (freq<min || min==0) min= freq;
      });
      
      //Second pass : calc percent
      list.each(function (i) {
         //extract and parse frequency
         freq = getTagFrequency($(this));
         // Remove tags frequency ?
         if (!keepFreq) $(this).html($(this).html().replace(/\n/g,'').replace(/\(\s*\d+\s*\)/g, '') );
         //Calc percentage
         var percent = Math.ceil( ((freq-min+1)/(max-min+1)) * scale );
         $(this).attr('class',percentClassPrefix+percent);
      });
   }
   function getTagFrequency(x) {
      var matchs= x.text().replace(/\n/g,'').match(/\s*\d+\s*/g);
      if (!matchs) return 0;
      var freq = parseInt(matchs[matchs.length -1]);
      return freq>0? freq : 0;
   }
   
   // Calling it on document ready
   $(document).ready(function(){
      getTagsCloudy('Label12',10,'cloud-percent',false,{
         'border':'none 0',
         'padding':'2px 2px 1px 1px',
         'margin':'0 0 0 0',
         'list-style-type':'none',
         'float':'left',
         'display':'inline',
         'white-space':'nowrap'
      });
   });
</script>

you pass to the function :
1- The place holder ID of container div/widget.
2- Scale; for example 10 : then you need to make CSS classes from 1 to 10.
3- percentClassPrefix: like 'cloud-percent', then you need to prefix CSS Classes names with 'cloud-percent'
4- keepFreq : true to keep the frequencies or false to remove it.
5- overwriteCSS: Options/associative array to overwrite styles set or inherited on regular tags list. How to figure that out, use Firbug. Bottom line you want to remove list bullets and extra margins or padding or border and add some floating.

Here is CSS code
<style title="text/css">
   /* If you use 10 scale, then you need classes from 1-10 */
   li.cloud-percent1 { font-size:70% }
   li.cloud-percent2 { font-size:80% }
   li.cloud-percent3 { font-size:80% }
   li.cloud-percent4 { font-size:90% }
   li.cloud-percent5 { font-size:100% }
   /* you can bold higher frequency tags or color them */
   li.cloud-percent6 { font-size:110%; font-weight:100;}
   li.cloud-percent6 { font-size:110%; font-weight:100;}
   li.cloud-percent7 { font-size:120%; font-weight:200;}
   li.cloud-percent8 { font-size:130%; font-weight:300;}
   li.cloud-percent9 { font-size:140%; font-weight:400;}
   li.cloud-percent10{ font-size:150%; font-weight:500;}
   /* neded To make container div expand with the content layout changes */
   .Label div {Overflow:Auto}
</style>

If you use 10 scale, then you need classes from 1-10, and as you see you can control how they are styled.
You can bold higher frequency tags or color them, you can even hide minimum frequency tags by setting [display:none;] on the first class.

And the HTML code of Tags/Labels:
See how they were originally output by Blogspot. And you don't need to change it.
Tags list should look like it.. which is the default output of Blogger..
<div class="widget Label" id="Label100">
<h2>Tags</h2>
<div class='widget-content'>
   <ul>
      <li><a href='http://www.moretechtips.net/search/label/ADO.Net'>ADO.Net</a>(7)</li>
      <li><a href='http://www.moretechtips.net/search/label/AJAX'>AJAX</a>(2)</li>
      <li><a href='http://www.moretechtips.net/search/label/ASP'>ASP</a>(11)</li>
      <li><a href='http://www.moretechtips.net/search/label/ASP.Net'>ASP.Net</a>(15)</li>
      <li><a href='http://www.moretechtips.net/search/label/DAL'>DAL</a>(7)</li>
      <li><a href='http://www.moretechtips.net/search/label/IIS'>IIS</a>(6)</li>
      <li><a href='http://www.moretechtips.net/search/label/javascript'>javascript</a>(5)</li>
      <li><a href='http://www.moretechtips.net/search/label/jQuery'>jQuery</a>(3)</li>
      <li><a href='http://www.moretechtips.net/search/label/OOP'>OOP</a>(5)</li>
      <li><a href='http://www.moretechtips.net/search/label/Paging'>Paging</a>(9)</li>
      <li><a href='http://www.moretechtips.net/search/label/performance'>performance</a>(7)</li>
      <li><a href='http://www.moretechtips.net/search/label/Regular%20expressions'>Regular expressions</a>(3)</li>
      <li><a href='http://www.moretechtips.net/search/label/SEO'>SEO</a>(4)</li>
      <li><a href='http://www.moretechtips.net/search/label/SQL%20Server'>SQL Server</a>(6)</li>
      <li><a href='http://www.moretechtips.net/search/label/Unicode'>Unicode</a>(4)</li>
      <li><a href='http://www.moretechtips.net/search/label/VB.Net'>VB.Net</a> (7)</li>
      <li><a href='http://www.moretechtips.net/search/label/XML'>XML</a> (3)</li>
   </ul>
</div>
</div>

In Other words : <li> <a href="some link"> Label name </a> (5) </li> . Of Course extra line-breaks or spaces are ignored.

that's it..! let it get cloudy..

3 comments

  1. ooblogger // March 17, 2009 at 7:33:00 PM GMT+11  

    Hello,

    Please add your site at http://www.sweebs.com. Sweebs.com is a place where other people can find you among the best sites on the internet!
    Its just started and we are collecting the best found on the net! We will be delighted to have you in the sweebs listings.

    Regards
    Kris

  2. Finance Blog // April 29, 2009 at 3:21:00 AM GMT+10  

    Hi mike,

    your blog is very useful. especially at blogger.
    many "blogger tips blog" has very old hacks and techniques. but yours is new and get me (and I think other visitors) excited every time.

    I am trying to develop some blogger hacks. If you want to share as an article ( in this site ) I can send some of them.

    thanks again

  3. Mike // April 30, 2009 at 7:54:00 AM GMT+10  

    @Finance Blog,
    thanks for ur feedback.. please email me with more details about sharing articles..

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS