jQuery Manipulation: Clear tags are getting cloudy!

for 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.

Tags Get Cloudy 1 | Get Cloudy 2 | Reset

• ADO.Net(7)
• AJAX(2)
• ASP(11)
• ASP.Net(15)
• DAL(7)
• IIS(6)
• javascript(5)
• jQuery(3)
• OOP(5)
• Paging(9)
• performance(7)
• Regular expressions(3)
• SEO(4)
• SQL Server(6)
• Unicode(4)
• VB.Net (7)
• XML (3)

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..

Tags: Blogger/Blogspot , CSS , javascript , jQuery , jQuery Tutorial , Regular expressions