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


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



Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 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
Просмотров: 3257 | Комментарии: 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 Комплексный прогон сайт...

51

2 Раскрутка сайта, прогон...

0

3 Трафик на сайт по низки...

4

4 Заработай на партнёрств...

3

5 Предлагаю проверенный з...

4

6 Продам билеты в московс...

1

7 Ручной прогон по трасто...

19

8 Создать лого на сайт

0

9 Раздача подарков и стик...

0

10 25 жирных ссылок. Яндек...

0


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


Комментарии



Copyright UcozOn.ru™ © 2008-2017


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