MyFreeWeb.ru

Все любят круги (в основном script.aculo.us). Но у этих кругов ширина и высота указана в пикселях. Че за говно?

Думал, что нельзя сделать круги без указания размеров в пикселях? Можно.

Мы будем использовать небольшой jQuery-трюк: будем устанавливать ширину, равную высоте.

wh = $('.circle').css('height'); 
$('.circle').css({ width: wh }); 

И 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; 
}​ 

Тестируем здесь. Отлично, можно увеличивать и уменьшать — все работает при разных размерах шрифта.

Но остались две проблемы: изменение размера шрифта на лету и увеличение/уменьшение перед загрузкой страницы. Первую проблему решим замечательным плагином jQEm. Засунем трюк в функцию и будем вызывать ее по событию emchange.

function yaycircles () { 
    wh = $('.circle').css('height'); 
    $('.circle').css({ width: wh }); 
} 
yaycircles(); 
$('.circle').bind('emchange', function () { 
    yaycircles(); 
});​ 

Теперь все круто. Я не знаю, как справиться со второй проблемой, но не думаю, что кто-то увеличивает перед открытием страницы.

P.S. К сожалению, jQEm срабатывает при сильном уменьшении страницы (когда еще видны маленькие несглаженные шрифты). Виноват браузер, да :) Поэтому круг не круглый при таком уменьшении на втором примере. Но вы знаете тех, кто на лету меняет размер шрифта? Поэтому я советую использовать первый пример.