• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Прогресс бар сообщений в мини-чате
Прогресс бар сообщений в мини-чате
workman
Суббота, 09 Января 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Скрипт заполняет прогресс бар по мере ввода сообщений.
Сделан на основе стандартного укозовского скрипта.

Установка проста, идём в мини-чат- Форма добавления сообщений и в самый конец перед последним endif вставляем этот код:
Код
<br><progress id='jeuwu27' value="0" max="$MAX_MESSAGE_LEN$" simv_left="Осталось $MAX_MESSAGE_LEN$ символов" style="margin-top:-10px;width:100%;height:15px;"></progress>  
  <script>$('#mchatBtn').css('height','62px');$('#mchatMsgF').css('height','60px');function countMessLength(){var rstz=$('#mchatMsgF').val().length;if(rstz<0){rstz=0;$('#mchatMsgF').val($('#mchatMsgF').val().substr(0,$MAX_MESSAGE_LEN$))}$('#jeuwu27').attr('value',rstz)var rst=$MAX_MESSAGE_LEN$-$('#mchatMsgF').val().length;if(rst<0){rst=0;$('#mchatMsgF').val($('#mchatMsgF').val().substr(0,$MAX_MESSAGE_LEN$))}$('#jeuwu28').html(rst);$('#jeuwu27').attr('simv_left','Осталось '+rst+' символов')if(rst<=50){$('#mchatMsgF').removeClass('yellow').addClass('red')}else if(rst>50&&rst<=150){$('#mchatMsgF').removeClass('red').addClass('yellow')}else if(rst>150){$('#mchatMsgF').removeClass('yellow').removeClass('red')}}</script>

А это ставим в CSS
Код
.red{background:rgba(255, 50, 50, 0.2)}  
  .yellow{background:rgba(255, 216, 0, 0.3)}

Можно подправить цифры 150 и 50 если хочется, это количество символов после ввода которых будет активироваться сначала желтый, а затем красны фон соответственно, для предела в 200 символов, можно установить 20 вместо 50 и 80 вместо 150.


Сообщение отредактировал
workman - Суббота, 09 Января 2016, 03:10
Страна: (RU)
Kosten
Суббота, 09 Января 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, а каким он будет, примерно таким.

Прикрепления: 8636803.png (6.6 Kb)
Страна: (RU)
workman
Суббота, 09 Января 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Kosten, НУ да. Примерно таким... А там можно будет уже закрасить как понравится
Страна: (RU)
FeStemBer
Суббота, 09 Января 2016 | Сообщение 4
Оффлайн
Проверенные
Сообщений:355
Награды: 1
workman, так не плохой скрипт, можно ко многому сделать его.
Страна: (RU)
workman
Суббота, 09 Января 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Tventum, Ну как по мне так я считаю его просто лишним. Тут выложил, ради тех, кто ставит себе "гирю" на сайт smile
Страна: (RU)
Сафрон
Воскресенье, 17 Января 2016 | Сообщение 6
Оффлайн
Vip
Сообщений:224
Награды: 1
Но он может только пригодится, если автоматически убирать много сообщений. А так он не будет же выполнять и показывать загрузку, так как там доли секунды.
Страна: (RU)
kredit-oformi
Воскресенье, 17 Января 2016 | Сообщение 7
Оффлайн
Vip
Сообщений:1975
Награды: 5
а ну типа уровень заполнения я правильно понял? То - есть он заполняется по мере заполнения чата сообщениями
Страна: (RU)
Tergran
Понедельник, 18 Января 2016 | Сообщение 8
Оффлайн
Пользователи
Сообщений:101
Награды: 0
На чате он не к чему.
Страна: (RU)
workman
Понедельник, 18 Января 2016 | Сообщение 9
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Tergran ()
На чате он не к чему
Ну так можно заточить его под любую форму насколько фантазии хватит
Страна: (RU)
Kosten
Вторник, 19 Января 2016 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, это что то похожее, что ты залил в первый материал, также для мини чата идет, только по сообщением.



1. Идём в Мини-чат->Форма добавления сообщений
2. В самый низ, перед последним

Код
<br><progress id='jeuwu27' value="0" max="500" style="margin-top:-10px;width:100%;height:15px;"></progress>   
<script>function countMessLength(){   
var rstz = $('#mchatMsgF').val().length;if (rstz<0){rstz=0;$('#mchatMsgF').val($('#mchatMsgF').val().substr(0,500));}$('#jeuwu27').attr('value',rstz)   
var rst = 500-$('#mchatMsgF').val().length;if (rst<0){rst=0;$('#mchatMsgF').val($('#mchatMsgF').val().substr(0,500));}$('#jeuwu28').html(rst);}   
</script>


Настраиваем скрипт, везде найти цифру 500 и заменить на то количество сообщений, которое максимально разрешено.
Страна: (RU)
Tergran
Вторник, 19 Января 2016 | Сообщение 11
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Что нужно специально ПРОГРЕСС БАР ставить, чтоб смотреть, как уходят посты, да это точно лишнее, ставят на загрузку или скачивать, больше не где не нужен.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Прогресс бар сообщений в мини-чате
  • Страница 1 из 1
  • 1
Поиск: