2010-05-02

Примеры использования VML и SVG

howto, JavaScript

Сейчас в интернете накопилось огромное количество примеров использования SVG и VML однако, в большинстве случаев это именно XML файлы для отображения которых их нужно скормить браузеру либо как файл с расширением .svg либо как .vml. В некоторых примерах имеет место XHTML файл у которого уже прописаны namespace и всякая дополнительная бутафория. Меня же в данном случае интересует как взять ОБЫЧНЫЙ html файл и добавить к нему векторную картинку. Причем добавить непосредственно к уже существующему HTML коду чтобы HTML и VML или SVG отображались вместе.

В конце концов путем расковыривания кода Барановского и анализа существующих примеров сделал два примера которые меня устроили:

пример создания SVG - в FF и Safari должен показаться заполненный круг

пример создания VML - в IE должен показаться овал и линия

 

Коментариев: 1

 
  2010-05-01

Векторная графика под HTML

howto, JavaScript

Оказывается, под HTML есть возможность использовать векторную графику, вот только разные браузеры реализуют эту возможность по разному, и пока HTML5 находится в зачаточном состоянии, VML под IE и SVG под остальными браузерами вполне себе работоспособны. Проблема в том как подружить эти две технологии. Дмитрий Барановский создал уровень абстракции позволяющий создавать волшебные вещи, причем во всех браузерах.

Залез смотреть исходник - внутри куча всего интересного - причем я еще не до конца уверен - это пис оф кейк или пис оф шит... Узнал много нового из жизни JavaScript...

Искренне завидую - тоже так хочу.

 

Коментариев: 5

 
  2010-04-05

Как показывать и прятать строки таблицы

JavaScript, вебмастеринг

Давным давно стояла задача, как при помощи JavaScript прятать одни строки таблицы и показывать другие. В CSS у стиля display есть значение table-row которое как раз и применяется по умолчанию к элементам типа TR, однако в Internet Explorer поддержка табличных классов практически не реализована, поэтому прямое присваивание .style.display = 'table-row' в IE ниже восьмой версии работать не будет. Не работает также и run-in. Однако, есть одно значение display которое железно работает везде - это nodisplay.

Как при помощи nodisplay показать спрятанный элемент? Просто удаляем связанный с TR класс! Т.е. у невидимых элеменов будет класс с display:nodisplay, назовем его nodisplay у видимых этого класса не будет и они останутся видимыми. Если хотим сделать видимыми невидимые элементы а невидимые видимыми то просто удаляем невидимый класс у одних и добавляем его другим. Очень просто! Как это сразу не пришло мне в голову....

пример

row 1 row 1
row 2 row 2

 

Коментариев: 7

 
  2010-02-22

Как изменить внешний вид полосы прокрутки

howto, JavaScript, ztools

Ответ - никак. Штатными средствами это не возможно. Однако, можно реализовать свою версию полосы прокрутки.

В выходные создал несколько новых тем для z.html.Scrollbar. По моему, получилось не дурно...

 

Коментариев: 7

 
  2010-01-05

ColorPicker

JavaScript, программирование

Выложил на ztools.org компонент для выбора цвета, по моему, получилось неплохо...

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

 

Оставить комментарий

 
  2009-12-18

getElementsByTagName

программирование, JavaScript

Забавно, getElementsByTagName не только возвращает коллекцию элементов по имени тега, но и поддерживает эту коллекцию в актуальном состоянии.

Так, если я добавлю в документ еще один элемент с таким же именем, то количество элементов в коллекции созданной ранее изменится:

  window.onload = function(){
    var inputs = document.getElementsByTagName('input');
    alert(inputs.length);
    var item = document.createElement('input');
    document.body.appendChild(item);
    alert(inputs.length);
  }

Upd: действительно: The list is live, so changes to it internally or externally will cause the items they reference to be updated as well.

 

 

Оставить комментарий

 
  2009-11-18

Занятный фокус с JS

программирование, JavaScript

За что я люблю 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 миллисекунд. Интересно что когда это писал - забыл поставить точку с запятой в }; - это привело к интересной штуке - калбак стал вызываться на этапе инициализации - т.е. скобки имеют наивысший приоритет даже если между ними стоит перенос строки.

 

Коментариев: 1

 
  2009-08-21

Закачака файлов AJAX

программирование, JavaScript, howto, вебмастеринг

Нашел занимательный пример по закачке файлов посредством AJAX. Решение, оказывается, простое ну просто до безобразия - у формы с файлом ставится target с именем невидимого фрейма, за счет этого форма с файлом не перегружается а перегружается этот самый невидимый фрейм. Гениально!

 

Оставить комментарий

 
  2009-08-18

Несколько полезных JS функций

программирование, JavaScript

Обнаружил что в квирк моде все браузеры определяют размер документа не так как в режиме соответствия стандартам, более того делают они это как бог на душу положит, поэтому сделал несколько полезных функций для того чтобы как то получить во всех браузерах в обоих режимах единообразные результаты. Тестировано в 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;
}

 

Оставить комментарий

 
  2009-04-18

ztools.org

JavaScript, вебдизайн, вебмастеринг

Проект ztools.org наконец дожил до состояния бета версии. Посетители сайта теперь могут скачивать оттуда выбранные компоненты в виде zip архива.

 

Коментариев: 2

разное (186)
howto (124)
программирование (108)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (21)
Android (17)
движок (17)
софт (15)
деньги (14)
кино (14)
видео (13)
беспредел (10)
музыка (10)
путешествия (10)
diy (9)
интернет (9)
книги (8)
занимательная физика (8)
ztools (8)
умный дом (8)
хостинг (7)
языки (7)
Nokia 5800 (7)
lifehack (6)
css (6)
вебдизайн (6)
связной (5)
oDesk (5)
apple (5)
прелоадер (5)
козлы (5)
arduino (5)
svn (4)
занимательная юриспруденция (4)
аниме (4)
Python (4)
кухня (4)
software (3)
движек (3)
энергия (3)
рестораны (3)
synphony (3)
фото на документы (2)
Берлин (2)
гитара (2)
спорт (2)
webmastering (2)
Ruby on Rails (2)
Java (2)
bash (2)
восстановить (1)
дурдом (1)
технологии (1)
programming (1)
наука (1)
сайты (1)
авторское право (1)
SEO (1)
годнурас (1)
C++ (1)
микросервисы (1)
Поиск по блогу:

Valid XHTML 1.0 Strict