Creating a Tag Cloud Using Php jQuery by Random

<?
mysql_connect('localhost', 'root', '');
mysql_select_db('test');

$query = "SELECT * FROM `tp_urls` Order by rand() limit 0,30";
$result = mysql_query($query);
//$num = mysql_num_rows($result);

?>

<!DOCTYPE html>
<html>
<head>
<title>jQuery: creating a tag cloud</title>
<meta charset="utf-8" />
<style>
#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:capitalize;
padding: 0 1em;
}

#tag-cloud li a {
   text-decoration: none;
   position: relative;
}
/*.tag_cloud {padding: 3px; text-decoration: none; font-family: verdana;     } */
.tag_cloud:link { color:#0000FF; }
.tag_cloud:visited { color: #9900FF; }
.tag_cloud:hover { color:#FF6600; background:none; }
.tag_cloud:active { color: #6699FF; background: #none; }

</style>
</head>

<body>

<ul id="tag-cloud"><? $i = 0;
                while($row = mysql_fetch_array($result)) {
                $i++;
                ?>
<li><a href="http://onwebdev.blogspot.com/search/label/accessibility/" class="tag_cloud"><?=$row["title"];?></a></li>
<? } ?>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

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;
}

function setFontSize() {

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

    return fontSize;

}

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;

}

$(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});


    });

});
</script>
</body>
</html>

Web Developer

Wednesday, April 13, 2011

Creating a Tag Cloud Using Php jQuery by Random

No comments:

Post a Comment