jQuery: creare una tag cloud

Possiamo realizzare una tag cloud con jQuery in cui i colori, le dimensioni dei font e l'allineamento degli elementi vengano determinati in modo casuale. Vediamo come.

La nostra tag cloud è una lista non ordinata contenente dei link. Gli stili di base sono i seguenti:

#tag-cloud {
    padding: 0.5em 0;
    margin: 0.5em;
    width: 40%;
    list-style: none;
    font: 100% Arial, sans-serif;
    border: 1px solid gray;
    border-width: 1px 0 1px 0;
    line-height: 1.5;
}

#tag-cloud li {
  display: inline;
  text-transform: lowercase;
  padding: 0 1em;
}

#tag-cloud li a {
   text-decoration: none;
   position: relative;
}

Per prima cosa definiamo una funzione che generi colori esadecimali casuali:

function createRandomColor() { 
 
    var hex = '0123456789ABC'.split(''),  
    color = '#', i; 
     
    for (i = 0; i < 6; i += 1) {  
        color = color + hex[Math.floor(Math.random() * 13)];  
    }  
 
    return color;  
}

Quindi definiamo una funzione che generi a sua volta un valore casuale per la dimensione dei font:

function setFontSize() {


    var maxFontSize = 30;
    var fontSize = Math.floor(Math.random() * maxFontSize + 14) + 'px';
    
    return fontSize;

   


}

Ora abbiamo bisogno di una funzione che posizioni gli elementi in modo casuale:

function setOffsets() {

    var offsets = {};
    
    var randTop = Math.floor(Math.random() * 10);
    var randLeft = Math.floor(Math.random() * 10);
    
    var maxTop = Math.floor(Math.random() * randTop) + 'px';
    var maxLeft = Math.floor(Math.random() * randLeft) + 'px';

   offsets.top = maxTop;
   offsets.left = maxLeft;
   
   return offsets;    
    



} 

Infine, usiamo queste tre funzioni su tutti i link della tag cloud:

$(document).ready(function() {


    
    
    $('#tag-cloud li').each(function() {
    
    
        var $a = $(this).find('a');
        var cssColor = createRandomColor();
        var cssFontSize = setFontSize();
        
        var linkOffsets = setOffsets();
        
        
        $a.css({color: cssColor, fontSize: cssFontSize, top: linkOffsets.top, left: linkOffsets.left});
        
    
    });


});

Potete visionare l'esempio finale in questa pagina.