Сен 25

Шаманим с TEXTAREA

Речь в этой заметкек пойдет о стандартном элементе TEXTAREA и о свойствах, которые можно ему придать:

  1. Как отключить стандартную подсветку TEXTAREA и INPUT в браузерах на WebKit (например, Safari и Google Chrome).
  2. Как сделать собственную подсветку выделяемого поля TEXTAREA.
  3. Как отключить "растягиваемость" поля TEXTAREA (наиболее актуально для браузеров с движком WebKit).
  4. Как сделать так, чтобы поле TEXTAREA вытягивалось вниз автоматически под размер набираемого текста.

Решение этих задач очень простое:
1. Для отключения автоматического подсвечиваиня полей TEXTAREA и INPUT в браузерах Google Chrome, Safari нужно задать следующий стиль:

input, textarea { outline: none; }

2. Для создания собственного варианта подсветки поля TEXTAREA можно задать следующие стили:

textarea { outline:none; border:1px solid #000000; }
textarea:focus { border: 1px solid #ff0000; background: #ffffcc; }

Для полей INPUT решение аналогично.

3. Чтобы текстовое поле TEXTAREA не растягивалось до произвольных размеров (если пользователь растягивает его за нижний правый угол), нужно задать CSS-стиль:

textarea { resize: none; }

На этом проблема будет решена. Все поля TEXTAREA перестанут растягиваться.

4. Для того, чтобы поле TEXTAREA растягивалось вниз автоматически в процессе набора текста, можно воспользоваться jQuery-плагином "jQuery Autosize". Использование плагина очень простое. Теперь любое поле TEXTAREA на странице будет подстраивать свою высоту под размер помещенного в него текста.

$(document).ready(function(){
    $('textarea').autosize();  
});

Для правильной работы должны быть подключены скрипты jQuery и плагина jQuery Autosize.

Плагин распространяется свободно по MIT License.

Авг 01

Генератор случайных паролей

У веб-программистов часто возникают задачи, когда требуется придумать пароль. Когда-то и я придумывал пароли самостоятельно, но надоело - сделал веб-сервис генерации случайных паролей. Пользуйтесь на здоровье!

UPDATE! Помимо самого генератора паролей, снабдил страничку любопытными фактами о паролях.

Фев 15

Коллекция пиктограмм

При разработке пользовательского интерфейса часто требуются пиктограммы. Но, ведь, не всегда хочется рисовать их самому, и тут на помощь к нам приходит сайт: http://www.iconsearch.ru/

На нём можно найти и скачать различные иконки и пиктограммы разных размеров, для того, чтобы использовать их при создании навигации и пользовательского интерфейса на сайтах и в программном обеспечении.

Фев 05

Использование карт на веб-страницах

Многие из вас регулярно видят электронные карты местности на различных страницах в интернете. Как установить карту на свой сайт, и с чего начать изучение работы с ними? В этом обзоре я публикую ссылки на документацию и примеры использования карт трех известнейших в рунете геоинформационных систем: Google Maps, Яндекс.Карты и OpenStreetMap.

Google Maps

Яндекс.Карты

Для того, чтобы использовать карты Google и Яндекс нужно получить специальный лицензионный ключ. Использование карт бесплатно, но лицензией определяются некоторые ограничения в использовании карт.

OpenStreetMap

Для использования на сайтах используется движок OpenLayers.

Различия карт, какую выбрать?

Действительно, все карты имеют различия. Где-то окружающая нас местность изображена очень детально, где-то весьма схематично. Многое зависит от выбранного региона. Визуальные различия карт тоже имеются. Выбирайте ту, которая наилучшим образом подойдет для решения ваших задач. ;)

Надеюсь, эта подборка ссылок поможет вам начать работу с картами Google, Яндекс и OpenStreetMap.