Действия

Изменение размера шрифта с помощью java-скрипта

Материал из База знаний Joomla

Посмотреть, как работает этот пример, вы можете у нас на сайте или на форуме. Сверху, справа, у нах находятся три кнопки: «А+», «А-» и «Сброс». Нажимая на них, вы можете изменять размер текста на сайте без перезагрузки страницы.

Итак, что необходимо сделать, чтобы это заработало и на вашем сайте:

1. Сохраняем в папке шаблона java-скрипт из архива (скачать)


2. Открываем файл шаблона index.php и перед тегом </head> вставляем код

<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="Large" onclick="changeFontSize(1);return false;">
   <img src="templates/<?php echo $cur_template; ?>/images/larger.png" border="0" alt="больше" />
</a>
<a href="index.php" title="Small" onclick="changeFontSize(-1);return false;">
   <img src="templates/<?php echo $cur_template; ?>/images/smaller.png" border="0" alt="меньше" />
</a>
<a href="index.php" title="Reset" onclick="revertStyles(); return false;">
  <img src="templates/<?php echo $cur_template; ?>/images/reset.png" border="0" alt="сброс" />
</a>

Если будет использоваться простой текст

<a href="index.php" title="Large" onclick="changeFontSize(1);return false;">[A +]</a>
<a href="index.php" title="Small" onclick="changeFontSize(-1);return false;">[A -]</a>
<a href="index.php" title="Reset" onclick="revertStyles(); return false;">[Сброс]</a>

Сохраняем файл.


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

Должно получиться примерно так:

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

Сохраняем, обновляем страницу сайта и испытываем.

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

Удачи!