Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 09:52
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 6
Гостей: 6
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Счетчик символов с улетом цифр на JQuery

Счетчик символов с улетом цифр на JQuery Счетчик, символов, улетом, цифр, JQuery
Счетчик символов с улетом цифр на JQuery. Использовать можно как в чате в форме ввода символов, так и на форуме и в комментариях, в любое место где используется TEXTAREA.
По мере ввода символов, от последней буквы или цифры отлетает плавно с растворением номер символа который был введен в строку, так же предусматривается подкраска строк при условие что используется более 150 символов.



Установка:
Подключение JQuery и плагина Caretposition
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="careposition.js"></script>

HTML
Code
<textarea id="textarea"></textarea>
<div id="tip"></div>

Javascript
Code
<script type="text/javascript">
  $(function() {

  var tip = $('#tip');
  $('#textarea').bind('keyup', function(e) {
  var pos = $(this).getCaretPosition();
  var bleft = this.offsetLeft + pos.left;
  var btop = this.offsetTop + pos.top;
  if($('#textarea').val().length > 139) {bnts = 'color:red;'} else {bnts = ''}
  tip.after('<div class="nums" id="nums'+$('#textarea').val().length+'" style="'+bnts+'left: '+bleft+'; top: '+btop+'">'+$('#textarea').val().length+'</div>');
  $('#nums'+$('#textarea').val().length).animate({marginLeft: '40px', marginTop: '-40px', opacity: '0'}, 1200 , function() {$(this).hide()})

  })
  });
</script>
Плагин выдает нам точную позицию каретки слева и справа. Обратите внимание на то, что если символов в TEXTAREA больше 139, то цвет счетчика станет красным. Также для каждого значения создается отдельный DIV, который в последствии и плавно улетучивается.

В добавок стилей вставляем CSS на страницу желаемого эффекта в head
Code
<style type="text/css">
body {margin:0;padding:0;background:#E3E3E3}
.container {text-align:center;margin-top:200px}

textarea {padding:10px;border:1px solid #A5A5A5;width:300px;height:100px;resize:none;
  font-family:Georgia;
  font-size:14px;
}
*:focus {outline:none}
.nums {position:absolute;margin-top:-14px;margin-left:3px;font-size:10px;color:#646464}
</style>
Автор\Источник: http://yraaa.ru/publ/3-1-0-1511

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 2.7Kb
Просмотров: 3114 | Комментарии: 2 | Рейтинг: 4.0/4 | |Категория: Скрипты Разное | Добавил: мир | Дата: 14.08.2012 | Скачали: 16 | Теги: jQuery, символов, счетчик, цифр, улетом
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
-1   Спам
1 Roman36Liman   Дата: 15.08.2012  Время: 11:06   [№ 13570]
А можно это как-то в чат влепить?

-1   Спам
2 Веб-Герой   Дата: 15.08.2012  Время: 21:20   1 [№ 13571]
Думаю да, тут ведь присутствует понятная инструкция. Исходя из нее можно и в чат поместить.


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru