Creating a Tag Cloud with c# and IEnumberable<>

I recently had to create a tag cloud for an application I’m writing. The tags are attached to bookmarks.

The function returns a paragraph tag with a link for each tag. Each link has a specific class attribute set depending on the weighting given to that tag.

The C# code:

public class TagCloudGenerator
    {
        public string MakeTagCloud(IQueryable<BookmarkTag> Tags)
        {
            Decimal totaltags = Tags.Count();
            Decimal tagpercent = 0;
            int tagweight = 0;

            StringBuilder TagCloud = new StringBuilder();

            var groupedtags = Tags.GroupBy(t => t.Tag);

            TagCloud.Append("<p class=\"tagcloud\">");

            foreach (var tag in groupedtags)
            {
                tagpercent = (tag.Count() / totaltags) * 100;

                if (tagpercent >= 90)
                {
                    tagweight = 1;
                }
                else if (tagpercent >= 70)
                {
                    tagweight = 2;
                }
                else if (tagpercent >= 40)
                {
                    tagweight = 3;
                }
                else if (tagpercent >= 20)
                {
                    tagweight = 4;
                }
                else if (tagpercent >= 3)
                {
                    tagweight = 5;
                }
                else
                {
                    tagweight = 0;
                }


                TagCloud.Append(String.Format("<a href='/tags/{0}' class='tag{1}'>{2}</a> ", tag.Key.Replace(" ", "-"), tagweight, tag.Key));
            }

            TagCloud.Append("</p>");
            return TagCloud.ToString();
        }
    }

The CSS:

/* Tag Cloud */

.tagcloud
{
    text-align: left;
}

.tagcloud a
{
    padding: 0px 10px 0px 0px;
    text-decoration:none;
    padding:3px 4px;
    white-space:nowrap  
}

.tagcloud a:hover
{
    background-color:#fff;
    color:#012840;
}

.tagcloud .tag1
{
    font-size: 2em;
}

.tagcloud .tag2
{
    font-size: 1.7em;
}

.tagcloud .tag3
{
    font-size: 1.5em;
}

.tagcloud .tag4
{
    font-size: 1.2em;
}

.tagcloud .tag5
{
    font-size: 1em;
}

.tagcloud .tag0
{
    font-size: .8em;
}

Show and Hide a div using jQuery

You may find yourself wanting to show and hide a section of your page from a button or a link. This is very easy with a little jQuery.

All you need to do is have a triggering object (an a tag in my example) and a target object (a div in my example)

You need to firstly ensure that jQuery is included in your project and is referenced on your page or master page. I am using a Master Page so I add the reference to that

I keep my jQuery library in a scripts folder so the reference in the head area looks like:

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

We then add some HTML into the content page (or MVC view in this case) like:

<h1>
        Show/Hide using jQuery</h1>
    <a id="showhidetrigger" href="#">show/hide</a>
    <div id="showhidetarget">
        This is the box that is hidden and shown.
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#showhidetarget').hide();

            $('a#showhidetrigger').click(function () {
                $('#showhidetarget').toggle(400);
            });
        });
    </script>

You can see the trigger a tag named showhidetrigger and the target div called showhidetarget and our jQuery script at the bottom.

The $(document).ready(function () { line is telling jQuery to execute when the page is ready and everything is loaded.

The $(‘#showhidetarget’).hide(); line is hiding the target div initially

And the $(‘a#showhidetrigger’).click(function () { $(‘#showhidetarget’).toggle(400); }); lines are telling the target div to toggle visible and invisible on the click event of the trigger a tag.

The jQuery Toggle method includes a nice smooth transition as well which makes it look great. You can speed up or slow down the transition by increasing or decreasing the transition parameter.