Свобода слова вебмастерского

jQuery-скрипт для авторастяжки текстового поля textarea

Dimox — Mon, 17 Nov 2008 14:52:46 +0000

Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.

И я нашел красивое решение, в виде jQuery-скрипта под названием jGrow. Проверял его в разных браузерах, в целом все нормально, заметил только один недочет - в Опере появляется горизонтальная прокрутка.

Размер самого скрипта совсем небольшой, выглядит вот так:

var $j = jQuery.noConflict();
$j.fn.jGrow = function(options) {
  var opts = $j.extend({}, $j.fn.jGrow.defaults, options);
  return this.each(function() {
    $j(this).css({ overflow: "hidden" }).bind("keypress", function() {
      $this = $j(this);
      var o = $j.meta ? $j.extend({}, opts, $this.data()) : opts;
      if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {
        this.rows += 1;
      } else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {
        this.rows += 1;
      } else if(o.rows != 0 && this.rows > o.rows) {
        $this.css({ overflow: "auto" });
      }
      $this.html();
    });
  });
}
$j.fn.jGrow.defaults = { rows: 0 };
$j(document).ready(function() { $j("#comment").jGrow({ rows: 25 }); })

Здесь нам интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:

$j("#comment").jGrow({ rows: 25 });

#comment - это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 - максимальное количество строк, до которых будет происходить авторастяжка. Если содержимое поля станет больше этого количества строк, то появляется прокрутка.

Если сделать вот так:

$j("#comment").jGrow();

то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.

Прошу заметить следующий момент. Cрипт не работает, если тегу </tt> задана высота через CSS, поэтому взамен нужно воспользоваться параметром <tt>rows</tt>: <div class="codecolorer-container html" style="height:37px;"><div class="codecolorer" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><textarea name="comment" id="comment" cols="70" rows="8">

Протестировать работу скрипта авторастяжки можно прямо на моем блоге.

Верстаем кроссбраузерный “резиновый” макет страницы Dimox — Sat, 08 Nov 2008 18:14:31 +0000 Как вы уже могли заметить, страницы моего блога некоторое время назад стали “резиновыми”. Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью поиска наилучшего решения с вашей помощью, уважаемые читатели и коллеги по цеху =) Итак… Задача - создать кроссбраузерный “резиновый” макет с правосторонним сайдбаром, в котором (макете) колонка с контентом при разрешениях экрана 1280×1024 и выше визуально располагалась бы примерно по центру окна браузера. Особенности “Резиновый” макет. Растяжка должна происходить за счет колонки с контентом. Прижать все содержимое страницы к правому краю окна браузера при разрешениях экрана 1280×1024 и ниже. Слева сделать динамический отступ с целью визуально отцентрировать контент (только на разрешениях 1280×1024 и выше). Ограничить максимальную ширину страницы для больших разрешений экрана (в моем примере - 1300 пикселей). Добиться кроссбраузерности. Использовать минимальное количество тегов, скриптов и хаков. Если говорить только о современных браузерах (Opera, FireFox, Safari, Chrome, IE8b2), то они вообще не создают никаких проблем, и поставленная задача в них решается налегке, даже в IE7 все работает со стандартными стилями. Проблема заключается, как обычно, в IE6, поэтому, собственно, вся работа сворачивается к изобретению “костылей” для этого браузера. Примеры То, что получилось у меня, вы можете наблюдать прямо на моем блоге, либо посмотреть отдельно созданный пример. Максимум, что мне удалось сделать для IE6 - применить expression на минимальную и максимальную ширину, но результат оставляет желать лучшего - при сужении/расширении окна браузера он ведет себя неадекватно. В общем, взываю к вашей помощи, уважаемые коллеги ;) Помогите, пожалуйста, красиво решить задачу. P.S. По секрету всему свету - возлагаю большие надежды на Сергея, поскольку знаю, что он подобные вещи решает на “ура!” =) © Dimox, Свобода слова вебмастерского, 2008. | Permalink Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6 Dimox — Fri, 31 Oct 2008 09:41:36 +0000 Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего блога. Я постоянно слежу за материалами по HTML и CSS верстке, но почему-то до недавнего времени мне нигде не попался простейший способ создания ховер-эффекта (:hover) в самом часто упоминаемом веб-разработчиками браузере IE6, который, как мы знаем, данный селектор поддерживает только для тега ссылки . Не знаю, то ли это решение объективно считается не таким уж хорошим, то ли я хожу не теми дорогами Интернета, но я лишь месяц назад увидел его в блоге Сергея Гордиенко, который, как оказалась, пользуется этим скриптом уже давно (а со мной не поделился =). До сей поры мне приходилось применять громоздкие скрипты, данный же скрипт состоит из всего лишь 6 строк: <attach for=element event=onmouseover handler=topm> <attach for=element event=onmouseout handler=verm> <script> function topm(){element.className='hover';} function verm(){element.className='';} script> Наверное, его можно и в одну строку вытянуть =), суть не в этом, главное, что его размер ничтожно мал по сравнению с альтернативными решениями, известными мне на сегодняшний день. Данный скрипт нужно сохранить в файл с любым названием, но обязательно с расширением .htc, например, ie6hover.htc. Как пользоваться скриптом Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу): * {behavior:url("ie6hover.htc")} Либо, например, вот так (если хотим его применить только к конкретному элементу): li {behavior:url("ie6hover.htc")} А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком: li:hover ul, /* для современных браузеров */ li.hover ul { /* для Internet Explorer 6 */ display: block } Обратите внимание, что класс .hover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить. Как видите, все максимально просто. © Dimox, Свобода слова вебмастерского, 2008. | Permalink Dimox - IT-извращенец Dimox — Tue, 28 Oct 2008 14:33:00 +0000 Если в нескольких словах - я запихал в Оперу (браузер) фреймворк jQuery. Ниже подробнее об этом, и что в том хорошего. Есть такая замечательная технология UserJS, которую поддерживает мой любимый браузер Opera и, насколько мне известно, все браузеры на движке Gecko, а это такие, как, например, Mozilla Firefox, Netscape, Flock, SeaMonkey, Camino, K-Meleon. И есть замечательный фреймворк jQuery, который, похоже, еще не раз будет упомянут на этом блоге (уж очень он мне полюбился). Совсем недавно у меня в голове созрело следующее желание: поскольку jQuery мне, как верстальщику, хорошо знакомому с технологией CSS, довольно просто дается в изучении (чего я не скажу про язык JavaScript), захотелось встроить его в Оперу, чтобы написать некоторые скрипты, которые загружались бы только с моего компьютера - потребность в таких скриптах я довольно часто ощущаю в последнее время. Как оказалось, встроить jQuery в Оперу проще пареной репы - достаточно создать новый UserJS-файл и запихать в него сам фреймворк, после чего можно писать сколько угодно скриптов на jQuery (я говорю “Опера”, т.к. только в ней это делал, но, я так полагаю, в браузерах на движке Gecko должно быть аналогично). Главное при этом - обозвать UserJS-файл с фреймворком таким образом, чтобы при сортировке по имени он находился в списке выше файлов с jQuery-скриптами. Вот реальный пример того, как я использовал такую интеграцию. В одном из моих предыдущих постов мне подсказали про потрясающий плагин Login-box для WordPress, который сделан на jQuery и позволяет по горячей клавише загружать всплывающее окно с формой авторизации. За эту информацию большое спасибо lilumi. Я легко “выудил” скрипт из плагина, в него же запихнул html-код самой формы и весьма доволен результатом. Теперь очень удобно авторизовываться на моих сайтах, нажимая комбинацию Ctrl+E. Плюсы подобной интеграции я вижу следующие: Нагрузка, требуемая для обработки скрипта, переносится на мой компьютер, а не на компьютеры посетителей, которые этой формой на моем сайте никогда не будут пользоваться (хотя, возможно, эта нагрузка и совсем незначительная). Размер страницы уменьшается (на примере плагина Login-box), т.к. из кода страниц блога исчезает дополнительный код, который стандартно создается плагином. А раз форма авторизации требуется лишь администратору/владельцу сайта, то было бы логичным для всех остальных посетителей исключить подгрузку кода формы в страницы сайта. То же самое касается и jQuery-скрипта (на примере плагина Login-box), который подключается к странице через мета-тег. Т.е., благодаря исключению скрипта, страница для посетителя еще несколько уменьшится. Удобное подключение скрипта одновременно на множество сайтов. В скрипте, интегрированном в браузер, достаточно прописать соответствующие домены, плагин же нужно ставить на каждый домен. Ну и исчезает необходимость после каждого изменения скрипта (пусть даже и не частого) залазить на фтп, чтобы его там обновить. Таким вот образом я использую несколько jQuery-скриптов, загружаемых только с моего компьютера (про один из них я уже писал). Все они созданы для изменения или добавления того или иного функционала в WordPress. P.S. Если найдутся желающие, отдельным постом могу выложить скрипт для WordPress-авторизации, о котором написал выше. © Dimox, Свобода слова вебмастерского, 2008. | Permalink Переключатель размера шрифта сайта на jQuery Dimox — Thu, 16 Oct 2008 11:42:04 +0000 Те мои постоянные читатели, кто заходят на блог, наверняка уже заметили, что его контентная часть несколько преобразилась: во-первых, фиксированная ширина этого блока изменена на динамическую (кстати, на эту тему скоро будет написан пост с целью выявления красивого решения), во-вторых, над сайдбаром появилась фича “Размер шрифта”, с помощью которой можно выбрать один из 4-х предопределенных мною размеров шрифта для контентной части. О реализации последней фичи я и хочу поведать в текущем посте. Почему я вообще решил сделать подобное? Потому что, во-первых, устали глаза от 13-пиксельного размера шрифта, во-вторых, захотелось универсальности, чтобы посетители могли сами выбрать для себя наиболее удобный размер, в-третьих, к этому подтолкнул сайт alexking.org, на котором тоже реализована подобная вещица. Поскольку на блоге я уже во всю использую jQuery, соответственно искал решения на нем же, ведь на jQuery код сводится к минимуму (если не считать сам фреймворк). В результате я нашел 2 возможных варианта: Switch stylesheets with jQuery - здесь механизм следующий: для каждого состояния необходимо использовать отдельный файл стилей, и все это дело работает с использованием куков, чтобы после переключения страниц сайта или даже после закрытия браузера кука не удалялась, и при последующем заходе на сайт выбор пользователя сохранился. jQuery Simple Style Switcher - здесь интересно то, что все стили записываются в один файл и переключение между ними происходит за счет дополнительного родительского класса, применяемого к тегу . Мне очень нужен был второй вариант (стилей немного, поэтому нет смысла выносить их в отдельные файлы), однако в нем не было куков, которые есть в первом варианте. Поэтому стояла цель - скрестить оба решения. Снова говорю “Спасибо!” моему знакомому программисту, благородному спасителю =), который быстро справился с поставленной задачей. Дабы не увеличивать и без того получившийся длинным пост, сразу, без всякого кода, предлагаю вам скачать полностью рабочий пример. Ну а живой пример вы можете наблюдать прямо на блоге. Скачать Переключатель размера шрифта сайта на jQuery Загрузок: 155 | Размер: 19 Кб Стили нужно будет задать только для 3-х переключателей (если говорить о моем примере), поскольку для 4-го используются стили по умолчанию. Переключателей можно сделать столько, сколько вам нужно, все дополнительные делаются по аналогии. P.S. Прежде чем приделать к блогу “Размер шрифта”, я проверял его работу в разных браузерах, как то: IE6, IE7, IE8b2, FF2, FF3, Opera 9.5+, Chrome. Safari. Поэтому, если в вашем браузере НЕ отключены куки (cookie) и JavaScript и переключение стилей все-таки не работает, то я не в силах что-либо изменить. © Dimox, Свобода слова вебмастерского, 2008. | Permalink