Skip to content

Instantly share code, notes, and snippets.

@p2
Created August 22, 2011 04:29
Show Gist options
  • Save p2/1161659 to your computer and use it in GitHub Desktop.
Save p2/1161659 to your computer and use it in GitHub Desktop.
A bookmarklet that converts inches to cm and feet to m. Can be expanded to convert other units as well. Visit www.ossus.ch/Convert.html, drag the link shown there to your bookmark bar and when you're on a website that needs conversion, click the boomarkle
<h1>Convert Bookmarklet</h1>
<p>A bookmarklet to (currently) convert <b>feet to cm</b> and <b>inches to Meter</b> on any website.</p>
<p>Drag this link to your bookmark bar and click it when you're on a website you want to convert: <a href="javascript:(function(){var head=document.getElementsByTagName('head')[0],script=document.createElement('script');script.type='text/javascript';script.src='http://www.ossus.ch/convert.js?'+Math.floor(Math.random()*99999);head.appendChild(script);})(); void 0">Convert</a>
</p>
/*
********************************************
* Convert US to metric and vice versa *
* *
* Created by Pascal Pfiffner, Aug 20, 2011 *
********************************************
*/
// add jQuery to the site
var script = document.createElement('script');
script.className = 'conv_item';
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
script.onload = conv_ready;
document.body.appendChild(script);
// the main function
function conv_ready() {
var progress = $('<div id="conv_progress" class="conv_item" style="position:fixed;top:0;left:0;width:120px;height:30px;line-height:30px;text-align:center;background-color:rgba(0,0,0,0.8);color:white;font-size:12px;text-shadow:0 0 4px rgb(32,73,160);">Converting...</div>');
$('body').append(progress);
// create regex objects
// 'm' = regex-match, 'to' = to-unit label, 'f' = factor, 'n' = round to this many decimal places
// 1st catched parentheses should match the whole thing
// 2nd catched parentheses should be the numerical-only matches
var regexes = {
'inch': {'m': /((?:^|(?:[^"][\s-\+\*x\/\:]))(([\d]+\.)?[\d]+)\s*("|in(?:ch(?:es)?)?))/gm, 'to': 'cm', 'f': 2.54, 'n': 1},
'foot': {'m': /((?:^|(?:[^'][\s-\+\*x\/\:]))(([\d]+\.)?[\d]+)\s*('|ft|foot))/gm, 'to': 'm', 'f': 0.3048, 'n': 2}
};
// find numeric matches
$('body *').contents().filter(function() {
try {
return (3 == this.nodeType) && this.textContent && (this.textContent.replace(/\s/g, '').length > 1);
}
catch(exc) {}
return false;
}).each(function(i, node) {
if (node.parentNode && 'script' != node.parentNode.nodeName.toLowerCase()) {
var txt = node.textContent;
if (txt && txt.length > 0) {
for (r in regexes) {
var hash = regexes[r];
var regex = hash['m'];
if (regex.test(txt)) {
node.parentNode.replaceChild($('<span class="conv_wrap">' + txt.replace(regex, '<span class="conv_' + r + '" data-n="$2">$1</span>') + '</span>').get(0), node);
}
}
}
}
});
// convert all matches
for (r in regexes) {
var rg = regexes[r];
var hash = regexes[r];
var rg = hash['m'];
$('.conv_' + r).each(function(i, node) {
var n = $(node);
var converted = n.data('n') * hash['f'];
n.after('<span class="conv_item" style="color:rgb(32,73,160);"> (' + converted.toFixed(hash['n'] || 1) + hash['to'] + ')</span>');
n.replaceWith(n.text());
});
}
// done
progress.html('<a style="color:white;" href="javascript:void(0);" onclick="conv_removeAll()">Remove again</a>');
}
function conv_removeAll() {
$('.conv_wrap').children().unwrap();
$('.conv_item').fadeOut('fast', function() { $(this).remove(); });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment