Tag Sizes 1.0

Created Thursday 20th of November 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

What it Does

Use this plug-in on a list of tags (li:s) and it will use whatever numbers found in the list to give each tag a corresponding size.

How to Use

jQuery('#tags').tagSizes('span'); would apply sizes too all li:s in #tags and look for numbers in a span element in each li.

Example

  • Foo (3)
  • Bar (12)
  • Baz (5)

Example Code

HTML

<div id="jquery-tag-sizes-example">
<
ul>
    <
li>Foo (3)</li>
    <
li>Bar (12)</li>
    <
li>Baz (5)</li>
</
ul>
</
div>

JS

// No 'number element' passed in - the plug-in will look for numbers directly in the li:s
jQuery('#jquery-tag-sizes-example').tagSizes();

Source Code

jQuery.fn.tagSizes = function (numberElementmaxSizeminSize) {
    return 
this.each(function () {
        var 
maxSize        maxSize || 24;
        var 
minSize        minSize || parseInt(jQuery('li'this).css('font-size'), 10);
        var 
max            0;
        var 
min            10000;
        var 
slope;
        var 
middle;

        
jQuery(this).find('li').each(function () {
            var 
li            jQuery(this);
            var 
numEl        numberElement li.find(numberElement) : li;
            var 
weight        parseInt(numEl.text().replace(/[^0-9]*/g''), 10) || 1;
            var 
logWeight    Math.log(weight);

            
li.attr('title'weight);

            
jQuery.data(this'tagsizes', {
                
logWeight:    logWeight
                
weight:        weight
            
});

            if (
logWeight min) {
                
min logWeight;
            }
            if (
logWeight max) {
                
max logWeight;
            }
        });

        if (
max min) {
            
slope = (maxSize minSize) / (max min);
        }

        
middle = (minSize maxSize) / 2;

        
jQuery(this).find('li').each(function () {
            var 
li        jQuery(this);
            var 
data    jQuery.data(this'tagsizes');

            if (
max <= min) {
                
li.css('font-size'middle 'px');
            }
            else {
                var 
distance    data.logWeight min;
                var 
result        slope distance minSize;

                if (
result minSize) {
                    
result minSize;
                }
                if (
result maxSize) {
                    
result maxSize;
                }

                
li.css('font-size'result 'px');
            }
        });
    });
};

Download

Plug-in

Requires

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Favicons

    This little plug-in will insert favicons to all external links found on your site. The plug-in scans the URL the link is pointing to for a favicon and...

    Details

  • Slide Presentation

    A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will f...

    Details

  • Checked checkbox-parent

    This tiny plug-in adds and removes a 'checked'-class to input[type=checkbox]'s parents. Very useful if you want to style the entire wrapping <label>-e...

    Details

More Plug-ins

Recent Comments

Powered by Disqus