Главная›JavaScript

Переключатель размера шрифта сайта на jQuery

40 комментариев

Те мои постоянные читатели, кто заходят на блог, наверняка уже заметили, что его контентная часть несколько преобразилась: во-первых, фиксированная ширина этого блока изменена на динамическую (кстати, на эту тему скоро будет написан пост с целью выявления красивого решения), во-вторых, над сайдбаром появилась фича “Размер шрифта”, с помощью которой можно выбрать один из 4-х предопределенных мною размеров шрифта для контентной части.

О реализации последней фичи я и хочу поведать в текущем посте.

Почему я вообще решил сделать подобное? Потому что, во-первых, устали глаза от 13-пиксельного размера шрифта, во-вторых, захотелось универсальности, чтобы посетители могли сами выбрать для себя наиболее удобный размер, в-третьих, к этому подтолкнул сайт alexking.org, на котором тоже реализована подобная вещица.

Поскольку на блоге я уже во всю использую jQuery, соответственно искал решения на нем же, ведь на jQuery код сводится к минимуму (если не считать сам фреймворк). В результате я нашел 2 возможных варианта:

  1. Switch stylesheets with jQuery – здесь механизм следующий: для каждого состояния необходимо использовать отдельный файл стилей, и все это дело работает с использованием куков, чтобы после переключения страниц сайта или даже после закрытия браузера кука не удалялась, и при последующем заходе на сайт выбор пользователя сохранился.
  2. jQuery Simple Style Switcher – здесь интересно то, что все стили записываются в один файл и переключение между ними происходит за счет дополнительного родительского класса, применяемого к тегу <body>.

Мне очень нужен был второй вариант (стилей немного, поэтому нет смысла выносить их в отдельные файлы), однако в нем не было куков, которые есть в первом варианте. Поэтому стояла цель – скрестить оба решения.

Снова говорю “Спасибо!” моему знакомому программисту, благородному спасителю =), который быстро справился с поставленной задачей.

Дабы не увеличивать и без того получившийся длинным пост, сразу, без всякого кода, предлагаю вам скачать полностью рабочий пример. Ну а живой пример вы можете наблюдать прямо на блоге.

Скачать

Переключатель размера шрифта сайта на jQuery

Загрузок: 2325 | Размер: 19 Кб

Стили нужно будет задать только для 3-х переключателей (если говорить о моем примере), поскольку для 4-го используются стили по умолчанию. Переключателей можно сделать столько, сколько вам нужно, все дополнительные делаются по аналогии.

P.S. Прежде чем приделать к блогу “Размер шрифта”, я проверял его работу в разных браузерах, как то: IE6, IE7, IE8b2, FF2, FF3, Opera 9.5+, Chrome. Safari. Поэтому, если в вашем браузере НЕ отключены куки (cookie) и JavaScript и переключение стилей все-таки не работает, то я не в силах что-либо изменить.

Смотрите также

Динамическое изменение размера шрифта на jQuery

25 комментариев

Публикация статьи “Умные динамические колонки с применением CSS и jQuery” стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта. Задача – реализовать динамическое ...

Цифровые часы на чистом CSS и jQuery

41 комментарий

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея – мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки ...

Умные динамические колонки с применением CSS и jQuery

54 комментария

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”). Недостатком фиксированных колонок при их использовании в “резиновом” ...

jQuery-cкрипт "Добавить в закладки"

135 комментариев

Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. ...

Комментарии (40)

  1. Повелитель тегов
    17 октября 2008 г. в 09:19

    @jeenart тут все умные, не только ты ;) а решение на jQuery хорошее, можно еще добавить понятности – представить в виде букв разного размера, пропорции конечно не важны, гл-е видеть динамику.

  2. Zodios
    17 октября 2008 г. в 10:49

    А почему бы не воспользоваться стандартным масшатбированием шрифта в браузере? Потому что увеличивается все шрифт а нужно только контента?

    Ney,

    У меня тоже нормально работает 9.60 (10447) Win Vista

  3. Yuriy Drozdov
    17 октября 2008 г. в 11:29

    Когда заходишь первый раз, то не показывает какой размер шрифта выбран.

  4. Dimox
    17 октября 2008 г. в 11:55

    2jeenart:

    Скрипт это конечно здорово, на если бы верстал грамотно в em-ах, то смог бы сделать и без скрипта…

    Через EM не получится так, как было нужно мне. Тем более, что EM – это морока. Не люблю их.

    2Повелитель тегов:

    представить в виде букв разного размера, пропорции конечно не важны, гл-е видеть динамику.

    Пробовал сначала сделать буквами – вышло некрасиво, поэтому сделал квадратами.

    2Zodios:

    Потому что увеличивается все шрифт а нужно только контента?

    Во-первых, да. Во-вторых, все браузеры по-своему реализуют масштабирование.

    Yuriy Drozdov, потому что используется размер по умолчанию и ничего не выбрано.

  5. Марина
    17 октября 2008 г. в 12:43

    jeenart, пфф, где это сказано, что “грамотно верстать” – это только в em-ах?

  6. jeenart
    17 октября 2008 г. в 15:53

    Ув. Марина, это сказано в здравом смысле, объясню почему: пользователи IE не смогут увеличить размер шрифта указанного в px, а таких пользователей ещё очень и очень много и про них не стоит забывать, если конечно вы верстаете не для того чтобы полюбоваться им в лисе3 и не забить на то как оно смотрится в других браузерах или скажем если зайти с мобилки, а также для того чтобы сделать увлечения шрифта как например на этом сайте, если указывать размер шрифта в em-ах, то можно сделать подобную функцию стандартными средствами css, и не нужно будет использовать скрипты.

  7. Максим
    17 октября 2008 г. в 19:54

    Верстать нужно в em и всё будет нормально. Тогда и с ie не будет проблем.

  8. Sonikelf
    17 октября 2008 г. в 21:25

    Наконец-то. Спасибо :)

  9. Андрей Берман
    19 октября 2008 г. в 11:49

    Максим, а в процентах можно?

  10. Михаил
    19 октября 2008 г. в 15:10

    Я бы добавил title к переключателям. Не уверен, нужно ли там указывать конкретный размер, или нет.

    И изначальное значение всё-таки стоит показать. Иначе не понятно, что это переключатель, который может что-то переключать. Нелогично.

    По поводу em и % видел недавно статью… Из неё явным образом следует, что они не равноценны и проценты таки правильнее.

  11. Солнце
    21 октября 2008 г. в 08:53

    может грубо выскажуся но эти копошения со шрифтами такой снобизм и перфекционизм…

  12. Dimox
    21 октября 2008 г. в 12:59

    Михаил, спасибо за разумные предложения. Изменил.

  13. dead
    24 октября 2008 г. в 15:23

    У меня тоже Opera 9.60 (Win). При клике на +/- загружается главная страница сайта.

  14. Ян Такушевич
    22 февраля 2009 г. в 15:33

    Я понимаю, что этот блог читают только гуру CSS и скриптов, но есть и чайники вроде меня, которые не понимают как это установить. Можно хоть в нескольких словах описать, как устанавливать?

  15. Ян Такушевич
    22 февраля 2009 г. в 19:35

    Всё я понял. Только вот как сделать, чтобы при уменьшении/увеличении шрифта он оставался одинаковым в сайдбаре, т.е. так как на этом блоге. Ато я сделал и у меня меняется размер полностью всего шрифта на блоге.

    1. Dimox
      23 февраля 2009 г. в 12:49 / ответ на коммент Ян Такушевич

      Допустим, что у контента идентификатор id="content", а у сайдбара id="sidebar". Чтобы не затронуть сайдбар нужно использовать такую конструкцию:

      .style1 #content {font-size: 12px}
.style2 #content {font-size: 13px}
...

      При этом имей в виду, что блоки с контентом и сайдбаром должны быть сами по себе, т.е. не находиться друг в друге.

      1. Ян Такушевич
        23 февраля 2009 г. в 14:56 / ответ на коммент Dimox

        Попробовал прописать вот так в style.css

        body.style1 #content { font: 13px/18px “Trebuchet MS”, Tahoma, Arial, sans-serif; }
        не помогло (сори если вопросы нубские)
        У меня в index.php:

        Это значит что сайдбар внутри какогото дива. Я правильно понимаю?

      2. Ян Такушевич
        23 февраля 2009 г. в 14:59 / ответ на коммент Dimox

        Чтото код не отобразился.
        У меня в index.php

        Это значит что сайдбар внутри какогото дива. Я правильно понимаю?

      3. Ян Такушевич
        23 февраля 2009 г. в 15:00 / ответ на коммент Dimox

        Блин ну чего он не отображается: “”

        1. Dimox
          23 февраля 2009 г. в 15:09 / ответ на коммент Ян Такушевич

          А подсказки по добавлению кода для кого написаны? =)

          1. Ян Такушевич
            23 февраля 2009 г. в 15:13 / ответ на коммент Dimox

            Сори :)
            Попробовал прописать вот так в style.css
            body.style1 #content { font: 13px/18px “Trebuchet MS”, Tahoma, Arial, sans-serif; }
            не помогло (сори если вопросы нубские)
            У меня в index.php:

            <?php get_sidebar(); ?>
    </div>

            Это значит что сайдбар внутри какогото дива. Я правильно понимаю?

      4. Ян Такушевич
        23 февраля 2009 г. в 15:01 / ответ на коммент Dimox

        Сброшу код на мыло

  16. Ян
    22 февраля 2009 г. в 22:57

    Есть предложение. Почему бы не сделать, чтобы по умолчанию шрифт был не самый большой (в нашем случае 16px), а, например, предпоследний, чтобы у посетителя был выбор: увеличить или уменьшить. Мне кажется, что кто если и захочет изменить шрифт, то скорее всего увеличить (крупный текст легче читается и меньше устают глаза), а мы предлагаем только уменьшить.

    1. Dimox
      23 февраля 2009 г. в 12:52 / ответ на коммент Ян

      Найди в скрипте такую строку:

      $j('#styleSwitch li#style4').addClass('selected');

      и замени style4 на нужный.

      1. Ян Такушевич
        23 февраля 2009 г. в 14:38 / ответ на коммент Dimox

        Изменил style4 на style3. Теперь при первой загрузке выбранным квадратом стал предпоследний, но шрифт всё равно стоит самый большой и при нажатии на самый большой квадрат шрифт остается тем же, но если нажать опять на предпоследний, то он уменьшается.

        1. Dimox
          23 февраля 2009 г. в 15:00 / ответ на коммент Ян Такушевич

          Попробуй сбросить куки.

          1. Ян Такушевич
            23 февраля 2009 г. в 15:07 / ответ на коммент Dimox

            Я в разных браузерах проверял, т.е. даже в тех, которые после установки скрипта загрузил впервые. Или куки одни для всех?

            1. Dimox
              23 февраля 2009 г. в 15:24 / ответ на коммент Ян Такушевич

              Не, с куками все нормально. Я понял, в чем дело. Тебе нужно к тегу <body> дописать класс style3:

              <body class="style3">

              Тогда будет работать.

  17. Ян Такушевич
    23 февраля 2009 г. в 14:45

    И еще. Я нашел мелкий баг. Если нажать на “Изменить” в плагине “С возвращением …”, то скрипт изменения шрифта перестает работать (пропадает выбранный квадрат и все квадраты не нажимаются). Помогает только перезагрузка страницы. Это скрипты конфликтуют или я чтото неправильно сделал? (у тебя всё ок)

    1. Dimox
      23 февраля 2009 г. в 15:01 / ответ на коммент Ян Такушевич

      Да, конфликтуют. Я кое-что забыл добавить в скрипт. Сейчас исправил, скачай его заново.

  18. андрей
    30 октября 2009 г. в 14:52

    Тебе нужно к тегу дописать класс style3:

    А есле нужен размер шрифта тот который уже был прописан в стилях, до подключения этого скрипта класс прописывать не нужно ? В примере стиль 4 отсутствует как клас.

    PS класс нужно добавлять не body а блоку с основным содержимым страницы.
    У вас это так и сделано, в примере нет.

  19. Леша
    15 января 2010 г. в 01:07

    Привет!
    Только начинаю учится писать на HTML,потому еще нет рабочих сайтов.
    Подскажите плз куда этот переключатель должен прописываться?
    Сори за такие вопросы.
    заранее спасибо!

    1. Dimox
      15 января 2010 г. в 10:51 / ответ на коммент Леша

      Туда, где он должен выводиться на странице.

  20. Unlock
    8 февраля 2011 г. в 13:30

    Что-то не нашел, где на это блоке фича используется. :(

    1. Dimox
      8 февраля 2011 г. в 13:49 / ответ на коммент Unlock

      Уже убрал, т.к. блог перегружен разными скриптами.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.