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 (numberElement, maxSize, minSize) {
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');
}
});
});
};