Все для minecraft 3.2, скрипты для ucoz| PUSK.UCOZ.NET - Каталог файлов

Меню сайта
Навигация Онлайн сервисы Все для uCoz Разное Minecraft Photoshop уроки Видео Cофт/Программы Photoshop Counter Strike 1.6
Мини-чат
Для добавления сообщения зарегистрируйтесь.
Наш опрос
Чего не хватает на сайте?
Всего ответов: 131
Статистика
Статистика сайта

Пользователей всего: 710
Материалов всего [?]: 1310 +
PR-CY.ru

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

Пользователи онлайн: Сегодня посетили


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


Улетный счетчик для TEXTAREA на JQuery
Добавил: MadMoss · Просмотров: 320 · Загрузок: 24
Категория: Разные скрипты
Скачать файл Битая ссылка?! Спасибо +

Идея пришла во время разработки дизайна виджета Twitter. Возник вопрос: куда вставить счетчик символов, ведь есть ограничение. Возможно, это не идея никакая, и давно все это уже придумано. Я решил, что будет интересно, чтобы цифры вылетали из букв и исчезали во время написания. Нигде раньше такого не видел сам, честно, но есть ощущение, что это не удивит людей. Ну, да ладно. В общем, я принялся за написание такого скрипта. Текстовый счетчик будет полезен для комментариев, будь даже это интернет магазин компьютерных игр. Самая главная задача здесь – это не анимация, и не то, каким образом будет вестись подсчет символов. Все это уже заезженная тема, пройденный этап. Или что там говорят в таких случаях? Самое главное – узнать позицию курсора в TEXTAREA в пикселях. Именно той самой мигающей палочки в TEXTAREA, а не стрелки. Как позже выяснилось при поиске, эта палочка называется – каретка. Поэтому в дальнейшем буду писать «каретка» вместо «мигающей палочки».

Если честно, в интернете полно статей о том, как узнать позицию каретки в TEXTAREA, и таким образом я нашел счетчик для TEXTAREA. И позиция во всех случаях выдается одним лишь числом. Определяется порядковый номер символа, после которого стоит каретка или перед которым она стоит, не важно. Разве это нам нужно? было бы замечательно, подумал я, найти скрипт, который выдает нам позицию каретки с точностью до пикселей сверху и снизу, чтобы в CSS можно было задать такие параметры, как TOP и LEFT. Поиски были долгими. Я уже и не искал на русскоязычных источниках, вводил в поиске такие запросы: «caret position pixels» и «caret textarea pixels». Я уже подумал, что пусть будет тот самый скрипт, который выдает одно число (я просто умножу его на среднюю ширину символа). Но это была плохая идея, потому что в TEXTAREA есть и другие строки, и в INPUT не прокатит. Тот скрипт нужен для вставки в поле смайликов и специальных кодов на место курсора, но никак не для моей цели.

Спустя несколько часов я нашел плагин JQuery, выдающий позицию каретки в пикселях. Только это мне было и нужно. Теперь-то дело за малым. После этого я просто сделал, чтобы при каждом нажатии на клавишу создавался DIV с количеством символов, и плавно исчезал. Когда вы быстро набираете в TEXTAREA какой-нибудь текст, то счетчики вылетают так, что это напоминает дымок. Выше я писал, что это счетчик для Twitter, поэтому я подумал об ограничении. Логично, что счетчик поменяет свой цвет на красный, достигнув барьера. Теперь это не похоже на дымок, теперь это как кровь.

Подключение 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:
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>
 
Информация:
Посетители, находящиеся в группе Гости,не могут скачивать файлы с данного сайта.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Мини профиль
Категории
Поиск
Рекламные места
Свободное рекламное место 150х200


Рекламные места свободны Обращайтесь к homyak
Бесплатная раскрутка сайта
Позитивные новости
Жизнь в фотографиях

Дизайн сайта полностью пренадлежит Pusk.ucoz.net
PUSK.UCOZ.NET © 2011-1012

↑ Наверх ↑ sitemap sitemap-forum «Секреты Ucoz»