Everybody loves circles (mostly
script.aculo.us). But these circles have their width and height defined in pixels. That sucks!
You thought you can't make the circles without exact sizes in px? You can.
We'll use a little jQuery trick — it will set width == height.
wh = $('.circle').css('height');
$('.circle').css({ width: wh });
And the CSS:
.circle {
text-align: center;
border-radius: 9000em;
-webkit-border-radius: 9000em;
-moz-border-radius: 9000em;
font: normal normal bold 4em Helvetica;
background: black; color: lime;
}
Ok, we can zoom in — everything will be OK. It will be perfect with different font sizes.
But there's two problems now: changing font sizes on the fly and zooming
before opening the page. We'll use the excellent
jQEm plugin to solve the first problem. Let's put the trick in a function and call it on the emchange event:
function yaycircles () {
wh = $('.circle').css('height');
$('.circle').css({ width: wh });
}
yaycircles();$('.circle').bind('emchange', function () {
yaycircles();
});
It rocks now :) I don't know how to solve the second problem, but I think that no one will zoom before opening the page.