Сейчас в интернете накопилось огромное количество примеров использования SVG и VML однако, в большинстве случаев это именно XML файлы для отображения которых их нужно скормить браузеру либо как файл с расширением .svg либо как .vml. В некоторых примерах имеет место XHTML файл у которого уже прописаны namespace и всякая дополнительная бутафория. Меня же в данном случае интересует как взять ОБЫЧНЫЙ html файл и добавить к нему векторную картинку. Причем добавить непосредственно к уже существующему HTML коду чтобы HTML и VML или SVG отображались вместе.
В конце концов путем расковыривания кода Барановского и анализа существующих примеров сделал два примера которые меня устроили:
Оказывается, под HTML есть возможность использовать векторную графику, вот только разные браузеры реализуют эту возможность по разному, и пока HTML5 находится в зачаточном состоянии, VML под IE и SVG под остальными браузерами вполне себе работоспособны. Проблема в том как подружить эти две технологии. Дмитрий Барановский создал уровень абстракции позволяющий создавать волшебные вещи, причем во всех браузерах.
Залез смотреть исходник - внутри куча всего интересного - причем я еще не до конца уверен - это пис оф кейк или пис оф шит... Узнал много нового из жизни JavaScript...
Давным давно стояла задача, как при помощи JavaScript прятать одни строки таблицы и показывать другие. В CSS у стиля display есть значение table-row которое как раз и применяется по умолчанию к элементам типа TR, однако в Internet Explorer поддержка табличных классов практически не реализована, поэтому прямое присваивание .style.display = 'table-row' в IE ниже восьмой версии работать не будет. Не работает также и run-in. Однако, есть одно значение display которое железно работает везде - это nodisplay.
Как при помощи nodisplay показать спрятанный элемент? Просто удаляем связанный с TR класс! Т.е. у невидимых элеменов будет класс с display:nodisplay, назовем его nodisplay у видимых этого класса не будет и они останутся видимыми. Если хотим сделать видимыми невидимые элементы а невидимые видимыми то просто удаляем невидимый класс у одних и добавляем его другим. Очень просто! Как это сразу не пришло мне в голову....
Выложил на ztools.org компонент для выбора цвета, по моему, получилось неплохо...
Компонент представляет собой RGB палитру, наподобие той, что используется в Photoshop - на мой взгляд, так выбирать цвет удобнее всего, хотя, есть задумка сделать еще несколько оригинальных колорпикеров.
За что я люблю JS это за то что на нем можно реализовать некоторые вещи совершенно нетривиальным способом. Например такая задача: Есть IFRAME который создается динамически, нужно привесить событие onload на объект window внутри этого IFRAME. Сразу после создания свойство contentWindow равно нулю, поэтому непосредственно после создания доступа к нему нет. Оно станет доступно через некоторое время. Логичным будет проверять на ноль свойство каждые сто миллисекунд пока оно не будет чему нибудь равно:
var onloadfunc = function(){
alert('loaded!!!');
};
(function(){
if (!iframe.contentWindow){
setTimeout(arguments.callee,100);
return;
}
iframe.contentWindow.onload = onloadfunc;
})();
В приведенном примере анонимная функция вызывает саму себя через каждые 100 миллисекунд. Интересно что когда это писал - забыл поставить точку с запятой в }; - это привело к интересной штуке - калбак стал вызываться на этапе инициализации - т.е. скобки имеют наивысший приоритет даже если между ними стоит перенос строки.
Нашел занимательный пример по закачке файлов посредством AJAX. Решение, оказывается, простое ну просто до безобразия - у формы с файлом ставится target с именем невидимого фрейма, за счет этого форма с файлом не перегружается а перегружается этот самый невидимый фрейм. Гениально!
Обнаружил что в квирк моде все браузеры определяют размер документа не так как в режиме соответствия стандартам, более того делают они это как бог на душу положит, поэтому сделал несколько полезных функций для того чтобы как то получить во всех браузерах в обоих режимах единообразные результаты. Тестировано в IE6, IE7, FF, Chrome, Opera
function getDocumentHeight(){
var de = document.body.parentNode;
var db = document.body;
return ((db.clientHeight>de.clientHeight)?db.clientHeight:de.clientHeight);
}
function getDocumentWidth(){
var de = document.body.parentNode;
var db = document.body;
return ((db.clientWidth>de.clientWidth)?db.clientWidth:de.clientWidth);
}
function getScreenHeight(){
var de = document.body.parentNode;
var db = document.body;
if (window.opera) {
return db.clientHeight;
}
if (document.compatMode=='CSS1Compat'){
return de.clientHeight;
}
else {
return db.clientHeight;
}
}
function getScreenWidth(){
var de = document.body.parentNode;
var db = document.body;
if(window.opera){
return db.clientWidth;
}
if (document.compatMode=='CSS1Compat'){
return de.clientWidth;
}
else {
return db.clientWidth;
}
}
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
function getScrollLeft(){
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
