Переключатель размера шрифта сайта на jQuery
Те мои постоянные читатели, кто заходят на блог, наверняка уже заметили, что его контентная часть несколько преобразилась: во-первых, фиксированная ширина этого блока изменена на динамическую (кстати, на эту тему скоро будет написан пост с целью выявления красивого решения), во-вторых, над сайдбаром появилась фича “Размер шрифта”, с помощью которой можно выбрать один из 4-х предопределенных мною размеров шрифта для контентной части.
О реализации последней фичи я и хочу поведать в текущем посте.
Почему я вообще решил сделать подобное? Потому что, во-первых, устали глаза от 13-пиксельного размера шрифта, во-вторых, захотелось универсальности, чтобы посетители могли сами выбрать для себя наиболее удобный размер, в-третьих, к этому подтолкнул сайт alexking.org, на котором тоже реализована подобная вещица.
Поскольку на блоге я уже во всю использую jQuery, соответственно искал решения на нем же, ведь на jQuery код сводится к минимуму (если не считать сам фреймворк). В результате я нашел 2 возможных варианта:
- Switch stylesheets with jQuery - здесь механизм следующий: для каждого состояния необходимо использовать отдельный файл стилей, и все это дело работает с использованием куков, чтобы после переключения страниц сайта или даже после закрытия браузера кука не удалялась, и при последующем заходе на сайт выбор пользователя сохранился.
- jQuery Simple Style Switcher - здесь интересно то, что все стили записываются в один файл и переключение между ними происходит за счет дополнительного родительского класса, применяемого к тегу <body>.
Мне очень нужен был второй вариант (стилей немного, поэтому нет смысла выносить их в отдельные файлы), однако в нем не было куков, которые есть в первом варианте. Поэтому стояла цель - скрестить оба решения.
Снова говорю “Спасибо!” моему знакомому программисту, благородному спасителю =), который быстро справился с поставленной задачей.
Дабы не увеличивать и без того получившийся длинным пост, сразу, без всякого кода, предлагаю вам скачать полностью рабочий пример. Ну а живой пример вы можете наблюдать прямо на блоге.
Скачать
Переключатель размера шрифта сайта на jQuery
Загрузок: 1155 | Размер: 19 Кб
Стили нужно будет задать только для 3-х переключателей (если говорить о моем примере), поскольку для 4-го используются стили по умолчанию. Переключателей можно сделать столько, сколько вам нужно, все дополнительные делаются по аналогии.
P.S. Прежде чем приделать к блогу “Размер шрифта”, я проверял его работу в разных браузерах, как то: IE6, IE7, IE8b2, FF2, FF3, Opera 9.5+, Chrome. Safari. Поэтому, если в вашем браузере НЕ отключены куки (cookie) и JavaScript и переключение стилей все-таки не работает, то я не в силах что-либо изменить.
Сброшу код на мыло
Да, конфликтуют. Я кое-что забыл добавить в скрипт. Сейчас исправил, скачай его заново.
Я в разных браузерах проверял, т.е. даже в тех, которые после установки скрипта загрузил впервые. Или куки одни для всех?
А подсказки по добавлению кода для кого написаны? =)
Сори :)
Попробовал прописать вот так в style.css
body.style1 #content { font: 13px/18px “Trebuchet MS”, Tahoma, Arial, sans-serif; }
не помогло (сори если вопросы нубские)
У меня в index.php:
2
</div>
Это значит что сайдбар внутри какогото дива. Я правильно понимаю?
Не, с куками все нормально. Я понял, в чем дело. Тебе нужно к тегу <body> дописать класс style3:
Тогда будет работать.
А есле нужен размер шрифта тот который уже был прописан в стилях, до подключения этого скрипта класс прописывать не нужно ? В примере стиль 4 отсутствует как клас.
PS класс нужно добавлять не body а блоку с основным содержимым страницы.
У вас это так и сделано, в примере нет.
Привет!
Только начинаю учится писать на HTML,потому еще нет рабочих сайтов.
Подскажите плз куда этот переключатель должен прописываться?
Сори за такие вопросы.
заранее спасибо!
Туда, где он должен выводиться на странице.
Что-то не нашел, где на это блоке фича используется. :(
Уже убрал, т.к. блог перегружен разными скриптами.