Главная JavaScript

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

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

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

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

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

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

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

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

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

Скачать

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

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

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

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

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

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

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

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

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

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