Каждый будний день, ровно в 9, я пишу о себе, о своей работе и о технологиях web программирования123
Март 17, 2009 | Comments | Заметки программиста
А вы что еще не используете GreaseMonkey? Сейчас я расскажу что это и вы сразу его установите.
Greasemonkey — расширение для браузера Mozilla Firefox, которое позволяет пользователю устанавливать скрипты для получения изменений на странице «на лету».
Март 2, 2009 | Comments | Заметки программиста
Перевод статьи Create a Scrolling Menu with CSS and jQuery.
Существует множество прокручивающихся меню и галерей изображений, созданных на Flash, вот яркие тому примеры 1, 2. Но автор захотел создать аналог на CSS и jQuery, конечно без эффектов смазывания картинки при перемещении, но все же. Это решение хорошо работает в большинстве популярных браузеров и при этом сохраняет доступность элементов при отключенном JavaScript.
Ноябрь 25, 2008 | Comments | Заметки программиста
Месяцы в Javascript нумеруются с 0, такая у них особенность, январь это нулевой месяц, например сейчас:
<script type="text/javascript">
date = new Date();
alert('текущий месяц: ' + date.getMonth());
</script>
И главное, не вздумайте делать так:
date.setMonth(date.getMonth()+1);
А то в декабре резко наступит нулябрь.
Ноябрь 18, 2008 | Comments | Заметки программиста
Хорошее название топика, правда? А названия топиков очень важны, по ним приходят из поисковиков и по названию человек сразу понимает то ли это что он искал. Теперь по сути.
Как люди в древнее время (когда не было jQuery) сабмитили форму на AJAX’е? Схема не сложна, но очень муторна, нужно составить либо строку из всех инпутов вида ?id=25&bring_me=pianino&verni_mena_na=nebo, либо в формате JSON, который опять же нужно парсить. Потом появились фреймворки и библиотеки умеющие делать это за нас, нужно было только указать что и куда передаем, т.е. типа того что: { id: document.getElementById(’hidden_id’) .value, bring_me: document.getElementById(’bring_me’) .value, …}, не очень удобно.
И тут появляется ОН jQuery, тот кто покорил самого Гугла! И был написан под него плагин jQuery Form Plugin, который делает всю работу по сабмиту формы за нас. Создаем форму используя самую обыкновенную верстку, без особых дополнений:
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
Подключаем jQuery, сам Form Plugin и создаем небольшой обработчик для формы:
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// ожидаем загрузки всего документа
$(document).ready(function() {
// назначаем 'myForm' обрабатываемой формой и задаем ей простецкую функцию
$('#myForm').ajaxForm(function() {
alert("Спасибо за комментарий!");
});
});
</script>
</head>
И все дела! Теперь вместо сабмита формы произойдет AJAX запрос на сервер по ссылке из action с данными из нашей формы! Так же плагин поддерживает и AJAX загрузку файлов! Описание плагина и скачать его можно на этом сайте – http://malsup.com/jquery/form/.
Ноябрь 13, 2008 | Comments | Заметки программиста
Программно позиционировал блок, использовал jQuery, работа была уже готова поэтому пошел проверять в браузерах. В первую очередь IE 6, потом 7, Safari и даже Хром, везде поведение одинаковое, все супер. В Опере возникли проблемы, вместо высоты отображаемой области, считается высота всего документа, вот код:
$(window).height();
Но в Опере 9.5 отрабатывает он аналогично этому:
$(document).height();
А вот так решаются все проблемы с вычислением этой высоты:
document.getElementsByTagName('html')[0].clientHeight;
Октябрь 23, 2008 | Comments | Заметки программиста
Неделю назад состоялся релиз нового Flash Player’а от Adobe: версия 10. Говорят что там наворочена куча функционала для 3D, эффектов и фильтров. Унылым же событием является то что перестала работать значительная часть функционала, а конкретнее обзор файлов из скрытого flash объекта. Этим методом пользуются многие cms (к примеру Wordpress), разные web 2.0 сайты и мой загрузчик картинок для tiny mce.
Проблема решается, вчера была выпущена новая версия SWFUpload, так же не отстает и FancyUpload основанный на этом же коде. Пока обе версии не оттестированные Beta и кидаться их ставить не нужно, все равно придется обновлять.
Подобное коснулось тех решений, где вызов обзора файлов шел не напрямую из flash’а, а через JavaScript, поэтому теперь все кнопки вроде «Обзор» или «Загрузить файлы» будут только на Flash.
Сентябрь 29, 2008 | Comments | Заметки программиста
Пришло время выложить в Open source мой скромный, немного сырой, но уже работающий плагин для загрузки и вставки изображений к TinyMCE.
 TinyMCE Images: Обзор |
 TinyMCE Images: Загрузка |
 TinyMCE Images: Удаление |
Плагин достаточно требовательный: PHP 5 и GD2 на сервере, Flash Player и JavaScript у пользователя.
Кратко об установке:
Плагин поддается локализации, у меня их только 2: ru и en.
Постоянная страница TinyMCE Images на dustweb.ru.
Скачать можно с SourceForge, а посмотреть демо можно здесь.
Сентябрь 25, 2008 | Comments | Заметки программиста
Разработал плагин для jQuery, он пожалуй тоже относится к клонам lightbox. Теперь я понял почему их так много, изменить любой из существующих гораздо сложнее чем написать свой! Смотрим, оцениваем: ImageBox.
Сентябрь 17, 2008 | Comments | Заметки программиста
Очень понравилась последняя статья на smashingmagazine о Best Practices для jQuery. Скажу честно у меня пока не хватает сил полностью перейти на подобный стиль маркапа страниц, бикоз потому что это требует изменить привычки по клиентскому программированию. Но это верный путь для JavaScript программиста, вот красочный пример из статьи:
Никогда не встраивайте JavaScript в элементы как атрибуты. Эта практика должна быть искореннена из вашего мозга.
<a onclick="doSomething()" href="#">Click!</a>
Все Javascript поведения должны быть включены во внешних скриптах связанных с документом тегом <script> в head страницы. Итак, правильный тег будет выглядеть так:
<a href="backuplink.html" class="doSomething">Click!</a>
И Javascript внутри myscript.js файла будет содержать нечто вроде этого:
...
$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
});
...
Сентябрь 2, 2008 | Comments | Заметки программиста
Ничего знаменательного, но я просто добрался до их User Interface Demos… это просто фантастично, забудьте Flash! выкиньте на помойку свой Silverlight. За JavaScript будущее, look at this guys.
А я вообще хотел написать что на сайте jQuery новый дизайн, и все.
