Майкл Лейгебер (Michael Leigeber) снова порадовал очередной “карапулькой” – очень маленький скрипт для всплывающих подсказок, который весит всего 2 килобайта, и притом абсолютно независим от сторонних библиотек.

Чтобы им пользоваться, достаточно подключить скрипт, таблицу стилей и добавить обработчики событий для нужных ссылок:

onmouseover="tooltip.show('Здесь текст <strong>подсказки</strong>');"
onmouseout="tooltip.hide();"

Стоит отметить, что это уже не первый скрипт автора, который обладает таким маленьким размером (особенно с учетом их полной независимости) и хорошей функциональностью. Советую обратить внимание и на следующие скрипты: JavaScript меню со слайдером на фоне (1Кб), горизонтальное меню аккордион (1Кб).

Смотреть демоСкачать

Lightgallery – клон популярного скрипта Lightbox, который не зависит от сторонних библиотек и весит всего 9,8К (минимизированная версия, 7,7 К в сжатом виде).

Возможности

• Масштабирование изображений
• Возможность изменять режим “во весь экран/по размеру экрана”
• Анимированные эффекты – плавное изменение размеров и прозрачности
• Возможность устанавливать опции: изменять скорость анимации, включать/выключать анимацию, устанавливать синхронное изменение размеров, включать/выключать масштабирование и др.
• Возможность добавлять языковые пакеты (в данный момент доступен только русский)
• Предварительная загрузка изображений (preload)

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

смотреть демозагрузитьдомашняя страница проекта

Phototype – интересный и вместе с тем простой клиент-серверный скрипт основанный на библиотеке Prototype для работы с изображениями, который может обрезать, поворачивать, добавлять тень к изображениям и др. Все эти манипуляции выполняются на сервере при помощи GD библиотеки для PHP. На стороне клиента работа с библиотекой выглядит так:

l_oPhoto = new Photo().load('image.jpg');
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

И результат выполнения этого кода:

Посмотреть больше примеров и скачать скрипт можно здесь.

В одной из предыдущих статей я написал о скрипте sessvars.js, который позволяет работать с сессиями без cookies, используя свойство window.name. Однако у этого скрипта есть одна большая проблема – сессии сохраняются только в том случае, если вы открываете ссылки в том же окне. Если же открывать ссылки в новом окне/табе, то данные сессий там будут не доступны.

Скрипт, который я вам сегодня представлю – PersistJS, также работает с сессиями, однако в отличии от sessvars.js он использует для хранения данных другие “накопители”. Суть в том, что многие браузеры имеют механизмы хранения данных на стороне клиента отличные от cookies. Все они намного проще и лучше последних, могут хранить больше данных, и не передаются в HTTP запросах. Однако, каждый браузер реализует эти механизмы по-своему. В данный момент существуют 4 различных решения для хранения данных на стороне клиента:

• globalStorage: Firefox 2.0+, Internet Explorer 8
• localStorage: development WebKit
• openDatabase: Safari 3.1+
• userdata: Internet Explorer 5.5+

Помимо вышеперечисленного, работу с сессиями можно организовать при помощи плагинов Adobe Flash и Google Gears, однако они также имеют свои проблемы – Flash может быть отключен или отсутствовать в браузере, а Google Gears пока еще не очень распространен.

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

• Flash 8
• Google Gears
• localstorage
• whatwg_db
• globalstorage
• UserData (Internet Explorer)
• cookie: хранение данных при помощи Cookie.

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

Это пока что первый релиз PersistJS, и протестирован он только на FireFox 2.0, FireFox 3.0rc1, IE7, и Safari 3.1.

<< читать дальше >>

Web приложения зачастую используют множество фоновых изображений, которые не видны при загрузке страницы. Во первых, это изображения, применяемые для “ролловер” эффектов, когда элементы меняют фон при наведении указателя мыши. Во вторых, это множество всевозможных динамических элементов, создаваемых JavaScript, а также содержимое получаемое при помощи AJAX. Проблема с этими элементами состоит в том, что при отрисовке таких элементов браузер начинает загружать фоновые изображения, что требует некоторого времени, а следовательно создает неприятный эффект мерцания и фрагментирования.

<< читать дальше >>