Главная » Файлы » Скрипты для uCoz » Скрипты by Apocalypse

Прогресс бар подсчёта заполнения текстового поля для Форума by Apocalypse для uCoz
23.06.14, 08:20:59





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

Установка:

В самый верх Формы добавления сообщений Форума вставляйте:
Код
<style type="text/css">  
  .progress{  
  width: 1px;  
  height: 14px;  
  overflow: hidden;  
  background-color: navy;  
  padding: 0px;  
  opacity:0.5;  
  }  
  </style>  

  <script type="text/JavaScript">  
  function textCounter(field,counter,maxlimit,linecounter) {  
// text width//  
var fieldWidth = parseInt(field.offsetWidth);  
var charcnt = field.value.length;

// trim the extra text  
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);  
}  

else {
// progress bar percentage  
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;  
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";  
document.getElementById(counter).innerHTML= +percentage+"%"  
// color correction on style from CCFFF -> CC0000  
setcolor(document.getElementById(counter),percentage,"background-color");  
}  
  }  

  function setcolor(obj,percentage,prop){  
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";  
  }  

  </script>


Далее на этой же странице найдите:
Код
$_MESSAGE$


И замените на:
Код
<?if($PAGE_ID$='threadpage')?>  
  <textarea cols="80" rows="10" id="message" name="message" class="postTextFl" onKeyDown="textCounter(this,'progressbar1',5000)" onKeyUp="textCounter(this,'progressbar1',5000)" onFocus="textCounter(this,'progressbar1',5000)" ></textarea>  
  <?else?>  
  $_MESSAGE$  
  <?endif?>


Всё! Установка скрипта завершена. Материал подготовил Apocalypse
Категория: Скрипты by Apocalypse | Добавил: Apocalypse | Теги: текстового, Apocalypse, форума, прогресс, by, бар, поля, подсчёта, для, заполнения
Просмотров: 237 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: