IT-К@ФЕ. Welcome! :)
   
Добро пожаловать, Гость
Логин: Пароль: Запомнить меня


Меняем размер шрифта при помощи JavaScript
(1 чел.) (1) гость
  • Страница:
  • 1

ТЕМА: Меняем размер шрифта при помощи JavaScript

Меняем размер шрифта при помощи JavaScript 1 год, 4 мес. назад #689

  • Aleksej
  • Вне сайта
  • Moderator
  • Постов: 1734
  • Репутация: 40
1. Сохраняем в папке шаблона java-script (скачать и распаковать).

2. Перед закрывающим тегом </head> в файле index.php шаблона вставляем следующий код:

<script type="text/javascript" language="javascript" 
src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $cur_template; ?>/md_stylechanger.js">
</script>

Вместо <?php echo $cur_template; ?> можно вписать название шаблона.

3. Определяем часть шаблона, где будет отображаться кнопка переключения размера шрифта (или текст) и вставляем следующий код:

Для отображения кнопок:

<a href="index.php" title="Увеличить размер" onclick="changeFontSize(1);return false;">
   <img src="templates/<?php echo $cur_template; ?>/images/larger.png" border="0" alt="больше" />
</a>
<a href="index.php" title="Уменьшить размер" onclick="changeFontSize(-1);return false;">
   <img src="templates/<?php echo $cur_template; ?>/images/smaller.png" border="0" alt="меньше" />
</a>
<a href="index.php" title="Размер по-умолчанию" onclick="revertStyles(); return false;">
  <img src="templates/<?php echo $cur_template; ?>/images/reset.png" border="0" alt="сброс" />
</a>

Для отображения текста:

<a href="index.php" title="Увеличить размер" onclick="changeFontSize(1);return false;">[A +]</a>
<a href="index.php" title="Уменьшить размер" onclick="changeFontSize(-1);return false;">[A -]</a>
<a href="index.php" title="Размер по-умолчанию" onclick="revertStyles(); return false;">[Сброс]</a>

4. Открываем CSS-файл шаблона (например, template_css.css) и меняем единицы измерения шрифтов html-элементов (размер шрифтов которых должен меняться) на относительные, т.е. px и pt меняем на % или em.

При необходимости обращаемся к страничке визуального пересчета.

В итоге мы должны получить примерно следующее:

p, div, td {
 font-size: 0.9em
}

Все; сохраняем изменения и испытываем.

Примечание: Если не работает изменение размера шрифта, а происходит обновление страницы или переход по ссылке после нажатия на кнопку изменения размера, то это значит, что JavaScript не работает (не грузится) и необходимо проверить правильность написания пути к нему.
Изменено: 1 год, 4 мес. назад от Aleksej.
  • Страница:
  • 1
Время создания страницы: 0.19 секунд