Найти на сайте

Изменение шрифта в статье пользователем на лету

+25
2.55K
  2. Блоги
  3. Изменение шрифта в статье пользователем на лету
Иллюстрация



Открываем файл вашего шаблона com_content_read.tpl
и вставляем в любое удобное место данный код
  1. <script type="text/javascript"> 

  2. {literal}

  3.  function fontColor(){ 

  4.    var fontcolor = $('select[name=fontcolor]').val();

  5.    document.getElementById('con_text').style.color=fontcolor;

  6.  } 

  7. function fontSize(){ 

  8.    var fontsize = $('select[name=fontsize]').val();

  9.    document.getElementById('con_text').style.fontSize = fontsize;

  10.  
  11.  } 

  12.  function fontFamily(){ 

  13.    var fontfamali = $('select[name=fontfamali]').val();

  14.    document.getElementById('con_text').style.fontFamily = fontfamali;

  15.  
  16.  } 

  17.  {/literal}

  18. </script>

  19.  
  20. <select style="width: 150px;" name="fontfamali" onchange="fontFamily()"> 

  21. 	<option value="">Шрифт</option> 

  22. 	<option value="'Arial', 'Helvetica', sans-serif">Arial</option> 

  23. 	<option value="'Courier New', 'Courier', monospace">Courier New</option> 

  24. 	<option value="'Georgia', serif">Georgia</option> 

  25. 	<option value="'MS Sans Serif', 'Geneva', sans-serif">MS Sans Serif</option> 

  26. 	<option value="'MS Serif', 'New York', serif">MS Serif</option> 

  27. 	<option value="'Tahoma', 'Geneva', sans-serif">Tahoma</option> 

  28. 	<option value="'Times New Roman', serif">Times New Roman</option> 

  29. 	<option value="'Verdana', 'Geneva', sans-serif">Verdana</option> 

  30. </select>

  31.  
  32. <select style="width: 150px;" name="fontsize" onchange="fontSize()"> 

  33. 	<option value="">Размер шрифта</option> 

  34. 	<option value="12px">12px</option> 

  35. 	<option value="14px">14px</option> 

  36. 	<option value="16px">16px</option>

  37. 	<option value="18px">18px</option> 

  38. 	<option value="20px">20px</option> 

  39. 	<option value="24px">24px</option> 

  40. </select>

  41.  
  42. <select name="fontcolor" onChange="fontColor()">

  43. 	<option value="">Цвет шрифта</option> 

  44. 	<option value="#000">черный</option> 

  45. 	<option value="red">красный</option> 

  46. 	<option value="#2E8B57">морской волны</option> 

  47. 	<option value="#87CEEB">голубой</option> 

  48. 	<option value="brown">коричневый</option> 

  49. 	<option value="blue">синий</option> 

  50. </select>
и измените ваш тэг
  1. <div class="con_text" style="overflow:hidden">
на 
  1. <div id="con_text" style="overflow:hidden">
Демо

П.С. Делал для друга, ему изменение цвета ненужно, поэтому на скрине его нет, а в коде оно присутствует, так что кому ненужно просто удалите.
Шаблон ATW
Замена стандартной каптчи
atlantisweb
0
nedoriko nedoriko 11 лет назад #
хорошая штука. я б ее сразу в нулевый код добавил.
+2
My-InstantCMS.Ru My-InstantCMS.Ru 11 лет назад #
Последний пункт не обязательно если сделать так:
Код PHP:
  1.  
  2. <script type="text/javascript"> 
  3. {literal}
  4. function fontColor() {
  5. 	var fontcolor = $('select[name=fontcolor]').val();
  6. 	$('.con_text').css('color', fontcolor); }
  7.  
  8. function fontSize(){ 
  9. 	var fontsize = $('select[name=fontsize]').val();
  10. 	$('.con_text').css('font-size', fontsize); } 
  11.  
  12. function fontFamily(){ 
  13. var fontfamali = $('select[name=fontfamali]').val();
  14. $('.con_text').css('font-family', fontfamali); } 
  15. {/literal}
  16. </script>
  17.
0
AtlantisWeb AtlantisWeb 11 лет назад #
согласен, варианты решения разные, кому что больше нравится )
0
lokanaft lokanaft 11 лет назад #
Менять класс на ид или просто менять чужие классы совсем не надо, даже настоятельно запрещается так делать на чужих сайтах. Мало ли, что там у людей завязано на этот класс: стили, другие скрипты...
Evanescence, хотел намекнуть), что мешать jquery и чистый явасрипт - это facepalm
+1
AtlantisWeb AtlantisWeb 11 лет назад #
Менять класс на ид или просто менять чужие классы совсем не надо

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

П.С. мне кажется в данном случае, врятли сильно кого напряжет поменять в css пару строк с класса на айди, но это имхо, а так спасибо за критику )
+2
lokanaft lokanaft 11 лет назад #
Хоть кто-то благодарен критике)
Тогда так:
Код JAVASCRIPT:
  1. <script type="text/javascript"><!--
  2. document.write('<select style="width: 150px;" onchange="$(\'.con_text\').css(\'font-family\', this.value)">'+
  3. '<option value="">Шрифт</option><option value="Arial, Helvetica, sans-serif">Arial</option><option value="\'Courier New\', Courier, monospace">Courier New</option><option value="Georgia, serif">Georgia</option><option value="\'MS Sans Serif\', Geneva, sans-serif">MS Sans Serif</option><option value="\'MS Serif\', \'New York\', serif">MS Serif</option><option value="Tahoma, Geneva, sans-serif">Tahoma</option><option value="\'Times New Roman\', serif">Times New Roman</option><option value="Verdana, Geneva, sans-serif">Verdana</option>'+
  4. '</select>'+
  5. '<select style="width: 150px;" onchange="$(\'.con_text\').css(\'font-size\', this.value)">'+
  6. '<option value="">Размер шрифта</option><option value="12px">12px</option><option value="14px">14px</option><option value="16px">16px</option><option value="18px">18px</option><option value="20px">20px</option><option value="24px">24px</option>'+
  7. '</select>'+
  8. '<select onchange="$(\'.con_text\').css(\'color\', this.value)">'+
  9. '<option value="">Цвет шрифта</option><option value="#000">черный</option><option value="red">красный</option><option value="#2E8B57">морской волны</option><option value="#87CEEB">голубой</option><option value="brown">коричневый</option><option value="blue">синий</option>'+
  10. '</select>')//-->
  11. </script>
Вставить в нужное место шаблона. Больше ничего трогать не надо.
0
Thanatognozija Thanatognozija 11 лет назад #
Очень жаль, что работает только для "Р" но если там другие, если у меня <p class="style2">, то оно не работает :(
0
My-InstantCMS.Ru My-InstantCMS.Ru 11 лет назад #
Thanatognozija, Попробуйте так:
$('.con_text p').css('color', fontcolor); } для всех <div class="con_text"><p></p></div>
или
$('.con_text p.style2').css('color', fontcolor); } только для <div class="con_text"><p class="style2"></p></div>
Не проверил но должно сработать
0
Thanatognozija Thanatognozija 11 лет назад #
Спасибо большое, все работает, но к сожалению только для чего-то одного. То есть, у меня есть разные классы там: <p class="style2">, <ol class="style2000">, <p class="style6"> и т.д. Если включается, то что-то одно, а вот чтобы для всего текста не получается... Напимер,
Код PHP:
  1. <script type="text/javascript"><!--
  2. document.write('<select style="width: 150px;" onchange="$(\'.con_text p.style2 ul.style2000\').css(\'font-family\', this.value)">'+
  3. '<option value="">Шрифт</option><option value="Arial, Helvetica, sans-serif">Arial</option><option value="\'Courier New\', Courier, monospace">Courier New</option><option value="Georgia, serif">Georgia</option><option value="\'MS Sans Serif\', Geneva, sans-serif">MS Sans Serif</option><option value="\'MS Serif\', \'New York\', serif">MS Serif</option><option value="Tahoma, Geneva, sans-serif">Tahoma</option><option value="\'Times New Roman\', serif">Times New Roman</option><option value="Verdana, Geneva, sans-serif">Verdana</option>'+
+1
My-InstantCMS.Ru My-InstantCMS.Ru 11 лет назад #
попробуйте так $('.con_text p.style2, p.style6, ol.style2000').css('color', fontcolor); }
либо $('.con_text ~ *').css('color', fontcolor); }
0
Thanatognozija Thanatognozija 11 лет назад #
Нет, к сожалению работает только что-то одно. Я уже все перепробовал, ничего не получается... А штука классная очень, лучше чем увеличение шрифта, которое было тут недавно предложено, во всяком случае мне больше этот подход понравился. Спасибо большое.
+2
lokanaft lokanaft 11 лет назад #
Работает оно всё. Вот сейчас к этому посту применил селектор .blog_post_body ol span, .blog_post_body > a - всё работает.
0
Thanatognozija Thanatognozija 11 лет назад #
Да... точно, работает, я просто не проставил запятые... А теперь все заработало чудесным образом... :)) Спасибо большое. И, О, ЧУДО, даже заработало в блогах...

Еще от автора

Варианты товаров(записей)

Варианты товаров(записей)

Поле дает возможность связать несколько записей(товаров) из одной категории и вывести их на странице записи(товара).
18
Шаблон Atlantis 1.10.2

Шаблон Atlantis 1.10.2

Добрый день! Представляю вам шаблон под 1.10.2
15
Шаблон витнаж под 1.10.5

Шаблон витнаж под 1.10.5

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

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.