За месяц Август, 2010

Ошибка JavaScript: есть null или не является объектом

Иногда встречается ошибка javascript … есть null или не является объектом.

Internet Explorer после такой ошибки останавливает дальнейшее выполнение сценария и (при соответствующей настройке) сообщает об ошибке желтым треугольником в левом нижнем углу.

Итак, в чем же дело.. Причем тут Null и объекты?

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

Частые причины ошибки “есть null или не является объектом”

1. Попытка обратиться к несуществующему свойству объекта:
a=1; alert (a.property);

2. Попытка обратиться к несуществующему элементу массива:
a = []; alert (a[1]);

Internet Explorer в сообщении об ошибке указывает строку, в которой она обнаружена. Рекомендуется проверить все похожие обращения к переменным.

Если Вам известны другие причины появления ошибки  “null или не является объектом”- сообщайте в комментарии..

ps. В некоторых WYSIWYG-редакторах в ранних версиях часто встречались такие ошибки…

Опубликовано Август 5, 2010 | автор: levik  |  Комментарий (1) »

javascript lightbox и аналоги: увеличение изображений и куча плюшек

На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

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

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

jQuery (Tools) overlay
http://flowplayer.org/tools/overlay/index.html
Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Опубликовано Август 2, 2010 | автор: levik  |  Комментарии (3) »

JavaScript редактор изображений - редактируем изображения прямо в браузере

Очень удобно дать возможность пользователю выбрать как будет выглядеть “превьюшка” изображения (уменьшенный вариант изображения… особенно в случае фиксированного разрешения), или отредактировать картинку “онлайн”, непосредственно в браузере.

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

Инструменты для редактирования изображений в браузере

JavaScript Image Cropper UI

Удобный инструмент для “редактирования” картинки непосредственно в браузере.

Demo: http://www.defusion.org.uk/demos/060519/cropper.php
Скачать: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Статья о редакторах изображений (а-ля “paint online”, функционал у многих довольно широк)
http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors-and-drawing-applications.html

Обрезка изображений в браузере - Resize crop cropui -

http://adw0rd.ru/2008/imgcrop/

http://odyniec.net/projects/imgareaselect/

Опубликовано Август 1, 2010 | автор: levik  |  Комментарий (1) »