Tinyicon — счетчик в favicon на js

    Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

    image


    Использование


    Использовать ее просто. Подключаем либу и пишем
    Tinycon.setBubble(6);
    

    Библиотека так же поддерживает опции такие как выбор цвета, шрифта и позиционирование счетчика:
    Tinycon.setOptions({
        width: 7,
        height: 9,
        font: '10px arial',
        colour: '#ffffff',
        background: '#549A2F',
        fallback: true
    });


    Хочется обратить ваше внимание на параметр fallback, который отвечает за отображение счетчика в title страницы для неподдерживаемых браузеров.

    Поддерживаемые браузеры


    Tinycon был протестирован и работает в следующих браузерах:
    • Chrome 15+
    • Firefox 9+
    • Opera 11+
    В следующих браузерах счетчик может отображаться только в title:
    • Internet Explorer 9
    • Safari 5

    Демо | Репозиторий проекта на gihub.

    P.S. У меня неверно отображается счетчик в Chrome 17 и нет обновления тайтла в IE9.
    Share post

    Comments 30

      –1
      Прекрасно. Некоторым сайтам рунета такого не хватает. Вы поняли о чем я.
        +1
        Можно юзерскрипт сделать :)
          +2
          Одноклассники?
            0
            noo
          +2
          Эх, не работает в IE8 и Safari, а в Chrome криво рендерит шрифты d.pr/6Ttr
            0
            Отличная идея! Наглядное пособие полезности (некоторых) возможностей HTML5.
            Спасибо за публикацию.
              0
              Канвас вообще по-разному можно писать.
              Я тут в качестве практики писал расширение для хрома которое заменяет все картинки на страницы на их чернобелую копию. Никакого серверсайда, чистый JS + canvas.
                0
                Или один фильтр в IE.
            +3
            Внезапно подумал, что это можно использовать для подсвечивания ссылок из разных доменов (localhost, test server, live) через userjs в Опере. А то просто вкладки покрасить нельзя.
            +1
            Opera 11.61
            Иконка появляется на долю секунды и пропадает.
              0
              Напишите багрепорт на GitHub
                0
                А у меня наоборот — в Opera 11.61 работает, а IE9 — только в режиме совместимости с текстом в заголовке окна вместо иконки.
                0
                Подпрыгивал на стуле и апплодировал. Очень пригодится.
                  +3
                  Очень удобно. Давно пользуюсь в Gmail аналогичной функцией
                    +1
                    Дождался-таки счетчика в 100, интересно было посмотреть, как же поведет он себя дальше.
                    Оказалось, что никак. Просто сбросился на 1.
                      +6
                      А внутрь заглянуть никак? :)
                      (function(){
                      	var count = 0;
                      	setInterval(function(){
                      	
                      		if (++count > 99) count = 0;
                      		Tinycon.setBubble(count);
                      
                      	}, 1000);
                      })();
                      
                      0
                      Было бы неплохо, если бы помимо цифр, можно было вывести хотя бы "+". Например, «99+», что значит, что кое-кто давненько не читал почту.
                        0
                        Tinycon.setBubble = function(num, colour){
                        
                        	// validate
                        	if(isNaN(parseFloat(num)) || !isFinite(num)) return log('Bubble must be a number');
                        	drawFavicon(num, colour);
                        	return this;
                        };
                        

                        Исправить это в 2 секунды.
                          0
                          Ну, никто и не спорит. Мой комментарий — это скорее фидбек автору, хоть он его отсюда и не получит, мдэ…
                      +4
                      Notification.js Google Chrome 6+, Firefox 2+, Opera, а IE отдыхает
                        0
                        Спасибо, вынесу в пост чуть позже — сейчас работы километр :(
                        +4
                        а утром просыпаешься и добиваешь голову фатали мыслью — "<ВЦ> куда я попал?!?!?!"
                        image
                          0
                          У вас Хром под *нуксом? :) Имхо это просто от шрифта зависит.
                            0
                            Нет, w7
                            0
                            Уже давно завидовал gmail'y, у которого такая штука есть. Теперь наконец-то у меня такое будет. Автору спасибо!
                              +1
                              Для обратной совместимости, стоит дать возможность владельцу сайта самому предварительно создать иконки. Имена иконок должны быть по соглашению, например: favicon1, favicon2… favicon99, faviconmax; и включается опцией iconsPrepared, например.

                              Only users with full accounts can post comments. Log in, please.