Tag Sizes 1.0
Created Thursday 20th of November 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
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');
}
});
});
};
Random jQuery Plug-ins
Live Validation
Use this plug-in to add live validation to any form on your page. The plug-in indicates whether a form control is valid or not by switching between an...
Image Zoom
This plug-in makes links pointing to images open in the "Image Zoom". Clicking a link will zoom out the clicked image to its target-image. Click anywh...
Center
This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.