Приветствую всех!

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для jQuery, позволяющем создать плавающий виджет.

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

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть … но есть люди, которые им пользуются
Читать дальше »

Как и обещал, сегодня выкладываю новую версию плагина для jQuery, позволяющего создать плавающий виджет с кнопками. Но, прежде всего, хочу поблагодарить всех, кто принял участие в обсуждении плагина. Вы очень помогли мне замечаниями и советами!

Сразу приведу ссылку на архив с новой версией.

Изменения и новые возможности
Читать дальше »

Приветствую всех!

Сегодня хочу поделиться небольшим плагином для jQuery, который я разработал специально для этого блога.

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

Идею плагина я позаимствовал на очень популярном блоге Mashable. Если вы откроете любую их статью, то слева от текста увидите небольшую панель с кнопками социальных сетей. Самое главное в том, что при прокрутке страницы, эта панель смещается вниз и кнопки видны постоянно.

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

Возвращаемся к плагину.
Читать дальше »

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.
Читать дальше »

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности

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

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.
Читать дальше »

Уделяете ли вы внимание организации своей работы?
Много ли у вас "мелких" дел, о которых вы регулярно забываете?

Вроде бы простые вопросы, но для многих людей (и я не исключение) организация работы – это актуальная проблема.

Хуже всего, когда нужно сделать много «мелких» дел, которые не занимают много времени, но обязательно должны быть выполнены вовремя… и держать в голове их все просто невозможно.

Естественно, разработчики реагируют на потребности рынка, и на сегодняшний день создано множество программ-органайзеров, различных напоминалок и т.п.
Примеры создания ToDo списков часто приводят в учебниках по программированию.

Я решил не оставаться в стороне и сделал собственный вариант такого ToDo списка, естественно, с некоторыми дополнительными возможностями.

Кстати, скрипт называется SimpleTasks.

Главная особенность – возможность указывать состояние выполнения задач. При этом используется специальная система обозначений.
Читать дальше »

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.

Поэтому я решил привести пример своей реализации этого эффекта.

Картинки будут загружаться только если посетитель наведет мышку на какой-нибудь блок с аннотацией. Естественно, что загрузка будет выполняться только один раз.

Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.
Читать дальше »

В этой статье мы продолжаем разработку виджета для работы с короткими заметками. Если вы не читали предыдущую часть, то очень советую бегло её просмотреть. В ней мы подробно описаны постановка задачи и реализована серверная часть виджета, т.е. весь PHP код.

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

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

И, как и обещал, выкладываю архив с исходниками.

Прежде всего, рассмотрим разметку страницы (index.html).
Читать дальше »

Приветствую всех! Сегодня я покажу, как создать несложный плагин для jQuery. Пример, конечно, учебный, но подобный подход можно использовать для создания интерфейсов, которые позволяют перемещать блоки на странице.

Итак, задача такая. Нам нужно создать стикер, который пользователь сможет свободно перемещать по странице. Но если пользователь оставит стикер около края страницы, то он должен плавно "прилипнуть" к этому краю. Сам стикер может представлять собой что угодно, для этого примера я использовал обычный div с картинкой.

Чтобы лучше объяснить принцип работы, я сделал демонстрационную страничку. По-умолчанию стикер находится около левого края окна, но вы можете переместить его в любую часть страницы. Если вы оставите его за пределами текста (над белым полем), то он плавно прижмется к краю страницы.

Теперь перейдем к реализации.
Читать дальше »

Сложно представить работу в интернете без использования форм. Но, к сожалению, очень часто удобство их использования оставляет желать лучшего.

В этой заметке я расскажу, как можно значительно увеличить этот показатель для формы с радио кнопками (radio buttons) за счет правильной HTML разметки и нескольких CSS стилей.

Обратите внимание. Применение этих советов никоим образом не сказывается на работоспособности формы и не изменяет отправляемые данные.

Как говорится «Одна картинка стоит тысячи слов». Поэтому сразу даю ссылки на демонстрационную страничку и архив с файлами примера.
Читать дальше »