Ноя 27

Программируем слайдер на jQuery и JavaScript

Я написал новую заметку для сайта "Уголок веб-разработчика" про то, как запрограммировать простейший слайдер на jQuery: http://codething.ru/jq_slider.php. Надеюсь кому-нибудь пригодится!

Сен 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.

Мар 11

С чем едят JSON?

Как и обещалось после Нового года, что не пройдет и года, как я напишу новую статью про передачу параметров от PHP к JavaScript по средствам передачи данных в формате JSON.

Встречайте: AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON

По моему мнению, эта статья завершает цикл статей посвященных механизму AJAX на моём основном сайте http://codething.ru/. Так как рассмотрены уже все основные функции, возможности и примеры.

Что дальше? Пока не знаю. Может быть сделать платный курс или давать консультации? Если есть какие-то соображения, идеи - пишите: mike@pestr.ru.

p.s. Кстати, готов разместить рекламу на сайте, т.к. ежедневная аудитория довольно большая. Подробности здесь.

Мар 03

Скрипт увеличивающейся при наведении картинки

Скрипт увеличивающейся при наведении картинки

При наведении мышкой картинка увеличивается. Довольно часто необходимо решать эту задачу, особенно часто это используется в выдаче рекламных блоков. Желательно, также, чтобы картинка при наведении мышки увеличивалась, но не ломала верстку страницы.

Рассмотрим решение данной задачи с помощью JavaScript-скрипта и библиотеки jQuery.

<html>
 <head>
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src='small.png' onmouseover='bigImage(this, "big.png");' align="left"/>
  <p>Какой-то текст, показывающий, что увеличенное изображение не ломает верстку, а размещается поверх содержимого страницы.</p>

  <div id="big" style="display: none; top: 0px; left: 0px; position: absolute; z-index: 1000;"></div>
  <script>
  function bigImage(obj, fname)
  {
   $("#big").css("left", $(obj).offset().left);
   $("#big").css("top", $(obj).offset().top);
   $("#big").html("<img src='"+fname+"' onmouseout='bigImageHide();'/><br/>");
   $("#big").show();
  }

  function bigImageHide()
  {
   $("#big").hide();
  }
  </script>
 </body>
</html>

Исходная картинка small.png загружается традиционно средствами HTML, но к ней мы добавим событие onmouseover (срабатывающее при наведении мышки), которое будет вызывать написанную нами функцию bigImage();

Для вывода увеличенной картинки на экран, создадим контейнер big, задав ему абсолютное позиционирование поверх других элементов сайта (z-index: 1000).

В функцию bigImage() передаются два параметра - информация о текущем элементе и название увеличенной картинки.

Функция bigImage() задает координаты контейнера big такими же, как и у уменьшенной картинки, после чего в контейнер размещается HTML-код увеличенного изображения. Увеличенное изображение содержит событие onmouseout (срабатывает, когда мышка ушла с объекта), по которому вызывается функция bigImageHide() - скрывающая с экрана контейнер big.

Полезный совет по использованию примера скрипта увеличения картинки:

  • Если вам надо передать ссылку, просто передавайте её третьим параметром в функции bigImage(). В саму функцию bigImage() также следует внести изменения, добавив в HTML-выдачу соответствующий тег <A> с параметром ссылки.

Скачать архив с примером скрипта увеличивающийся при наведении картинки, 54 Кб.

Янв 16

Новый год — новый материал на сайт

Часто, ориентируясь на материалы сайта codething.ru, пользователи писали что у них не выходит сделать загрузку JavaScript'а в режиме AJAX. Ничего не выходит, мол. На самом деле, проблема очень просто решается с помощью библиотеке jQuery, а как именно, я и показал в новом материале:

http://codething.ru/ajax_script.php

Следующий материал выйдет скоро (не придется ждать и года) и будет посвящен передаче через протокол JSON.

p.s. Всех поздравляю с новым наступившим 2012-м годом!