Php and css label cloud effect

Php and css label cloud effect

Function createTagCloud ($ tags) { // I pass through an array of tags $ I = 0; Foreach ($ tags as $ tag) { $ Id = $ tag ['id']; // the tag id, passed through $ Name = $ tag ['tag']; // the tag name, also passed through in the array // Using the mysql count command to sum up the tutorials tagged with that id $ SQL = "SELECT COUNT (*) AS totalnum FROM tutorials WHERE tags LIKE '%". $ id. "%' AND published = 1 "; // Create the resultset and return it $ Res = mysql_query ($ SQL ); $ Res = mysql_fetch_assoc ($ res ); // Check there are results ;) If ($ res) { // Build an output array, with the tag-name and the number of results $ Output [$ I] ['tag'] = $ name; $ Output [$ I] ['num'] = $ res ['totalnum']; } $ I ++; } /* This is just calling another function that does a similar SQL statement, but returns how many pieces of content I have */ $ Total_tuts = $ this-> getNumberOfTutorials (); // Ugh, XHTML in PHP? Slap my hands-this isn't best practice, but I was obviusly feeling lazy $ Html =' '; // Iterate through each item in the $ output array (created above) Foreach ($ output as $ tag) { // Get the number-of-tag-occurances as a percentage of the overall number $ Ratio = (100/$ total_tuts) * $ tag ['num']; // Round the number to the nearest 10 $ Ratio = round ($ ratio,-1 ); /* Append that classname onto the list-item, so if the result was 20%, it comes out as cloud-20 */ $ Html. =' '. $ Tag ['tag'].' '; } // Close the UL $ Html. =' '; Return $ html; } 2. css code section/* delete the default list style to make it a common list */ . Home-item ul. tagcloud { List-style-type: none; Margin: 0px; Padding: 0px; } /* Set the li style */ . Home-item ul. tagcloud li { Display: inline! Important; Margin-right: 15px; Line-height: 2em; } . Home-item ul. tagcloud li { Display: inline; } /* Tag cloud effect */ . Home-item ul. tagcloud li. cloud-10 { Font-size: 110%; } . Home-item ul. tagcloud li. cloud-20 { Font-size: 120%; } . Home-item ul. tagcloud li. cloud-30 { Font-size: 130%; } /************************************* You get the idea, I'm skipping a few *************************************/ . Home-item ul. tagcloud li. cloud-90 { Font-size: 190%; } . Home-item ul. tagcloud li. cloud-100 { Font-size: 200%; }