7 заметок с тегом

crossbrowser РСС

15 ноября 2009, 22:52

Javascript GrayScale Image (Crossbrowser)

Как сделать из рисунка, с помощью javascript черно-белую картинку? Не простая казалось бы задача, но решается не сложно. Для ИЕ есть могучий css-фильтр, но для картинок нет селектора :hover (псевдо-класса), потому имитировать его мы будем через javascript, а для остальных браузеров будет canvas.
// Функция для "остальных" браузеров
// Которая и делает преобразование
function grayscale(image, bPlaceImage){
	// Создаём объект типа canvas.2d
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");
  // Делаем его размером с нашу картинку
  var imgWidth=image.width;
  var imgHeight=image.height;
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  // Пихаем картинку в наш объект
  myCanvasContext.drawImage(image,0,0);
	// Заганяем попиксельно картинку в матрицу
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
  // Теперь в цикле, каждый пиксель мы делаем ч/б
  for (i=0; i<imageData.height; i++){
    for (j=0; j<imageData.width; j++){
		  var index=(i*4)*imageData.width+(j*4);
		  var red=imageData.data[index];	  
		  var green=imageData.data[index+1];
		  var blue=imageData.data[index+2];	  
		  var alpha=imageData.data[index+3];	 
		  var average=(red+green+blue)*0.3333; 	  
		  // Оставляем прозрачность и делим на среднее от RGB
			imageData.data[index]=average;
			imageData.data[index+1]=average;
			imageData.data[index+2]=average;
			imageData.data[index+3]=alpha;
		}
  }
  // Получаем чёрно-белую картинку
  myCanvasContext.putImageData(imageData,0,0,0,0, 
  	imageData.width, imageData.height);
	// Вставляем чёрнобелую картинку
	// От параметра зависит куда вставляем
	// Либо рядом в div-ку, либо отдаём через return
  if (bPlaceImage){  
	  var myDiv=document.createElement("div");  
	  myDiv.appendChild(myCanvas);
	  image.parentNode.appendChild(myCanvas);//, image);
  }
  return myCanvas.toDataURL();

}

// Функция, что делает картинку ч/б и при наведении мыши возвращает 
// нормальное состояние
function MakeGSImage(image){
	// если испортил (только у него есть фильтр) 
	if (typeof image.style.filter != "undefined") {
		// объект должен иметь лаяут
		image.style.zoom = 1;
		// делаем ч/б используя фильтр grayscale=1
		image.style.filter = 
			"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
		// вешаем тригеры мыши
		image.onmouseover=function(){
			this.style.filter = 
				"progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";}
		image.onmouseout=function(){
			this.style.filter = 
				"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";}
	} else {
		// для функции grayscale практически идентично %)
		image.mouseOverImage=image.src;
		image.onload=function(){return true;};
		image.normalImage=grayscale(image, false);
		image.onmouseover=function(){this.src=this.mouseOverImage;}
		image.onmouseout=function(){this.src=this.normalImage;}
		image.src=image.normalImage;	
	}
}


canvas   crossbrowser

21 октября 2009, 5:57

Магия, отменяем загрузку CSS в браузере с включённым JS

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо... Код выглядит так:
<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->
И шо, и как? Всё довольно просто ;))
  1. JS пишет перед стилем комент
  2. На кондишинал.комментс эта штука закроется
  3. Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
  4. И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
  5. Работает везде!


javascript   css   crossbrowser   magik

19 сентября 2009, 11:15

Javascript: minijQuery 0.0.0.1 alpha :D

Есть много проектов, где функционал Джиквери слишком излишен, и используется от сили 1% возможностей? Зачем тогда тянуть 55кб? Если тот проект вместе с графикой в два раза меньше ;)

Недолго подумав, решил начать писать нечто кастомное. Название всплыло само собой minijQuery. Сразу скажу, для работы использует $ и addLoadEvent, что бы сразу было кроссбраузерно и красиво ;)
minijQuery = function(pattern, action) {
	// пустой патерн, уходим, возможно скоро закоментируется
	if (typeof pattern != "string" || pattern.length < 1) return;
	// объявляем дефолтный выбор
		var _target = document.body; // контейнер всё боди
		var _select = "*"; // выбераем все теги
		var _class = false; // класс
	// разбиваем на части запросик
	var selector = pattern.split(" ");
	var parts = selector.length;
	// дальше по сценарию
	switch (parts){
		case 1: //если всего один, подразумеваем тег.класс
			var sel = selector[0].split("."); 
			_select = sel[0]; 
			_class = sel[1];
			break;
		default: // если больше, значит есть ещё и #контейнер
			var sel = selector[0].split("#");
			_target = $(sel[1]);
			var sel = selector[1].split(".");
			_select = sel[0]; 
			_class = sel[1];
	}
	// дальше просто перебераем в контейнере, все нужные тэги
	var tag_s = _target.getElementsByTagName(_select);
	for(var i=0; i < tag_s.length; i++) {
		if (tag_s[i].className == _class || !_class) {
			// совпал класс, или не задан выполняем действие
			// пока только элементарные
			// скоро они преврятятся в методы 
			switch (action) {
				case "hide": tag_s[i].style.display = 'none'; break;
				case "show": tag_s[i].style.display = 'inline'; break;
				case "toggle": 
					var _display = tag_s[i].style.display;
					tag_s[i].style.display = 
						_display != 'none' || _display.length < 1
						 ? 'none' : 'inline'; 
					break;
			}
		}
	}
	// возвращаем список выбраных элементов
	return tag_s;
}
Попробовать пример можно слева, на тэгах, посмотреть отдельно, будет ссылка ниже.

Ограничения (поддерживает только двухуровневый запрос):
  • .класс
  • тэг.класс
  • #конетйнер .класс
  • #конетйнер тэг.класс
  • #конетйнер тэг
  • всё остальное идёт боком ;)
В планах:
  • добавить простейшую рекурсию, для более вложенных запросов;
  • расширить функционал изменением стилей;
  • добавить методы / выкинуть второй параметр;


crossbrowser   minijQuery

25 августа 2009, 11:10

CSS: Плавающие блоки с разной высотой, с выравниванием в ряду по самому высокому Избранное

Иногда когда делаем блоки с float:left, приходится сталкиваться с блоками разной высоты, и они при переходе на новую строчку, начинают строится после самого высокого, что ужастно... И приходится или ставить после определённого количества br clear=’all’ или указывать фиксированую высоту, что не всегда приемлемо.

Этот вопрос можно решить всего-лишь сэмулировав display:inline-block для старых ИЕ и для старых фоксов, ниже 3
.gallery-item {
    border-top:1px solid #AAAAAA;
    width: 147px;
    *width:147px;
    display: -moz-inline-stack; /* для FF ниже 3  */
    display:inline-block;
    font-size:91%;
    margin: 0 24px 20px 0;
    min-height:178px;
    vertical-align:text-top;
    border:1px solid #797873;

    /* уголки, ля-ля-ля */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    padding: 5px 5px 0;
    color: #4b4c4c;
    zoom:1; /* обычный layout fix для ИЕ6 */
    *display:inline; /* для ИЕ 6, 7 */

}


crossbrowser   css

13 августа 2009, 11:06

CSS: самый простой футер, приклееный вниз (Crossbrowser bottom fixed footer) Избранное

Давно использую данный «текникс», а на хабре говорят что про него никто не слышал. Странно, вооот. Поэтому встречайте ;)

Нужен простенький CSS. Мы зададим высоту html, body и враппера 100%, маргин у враппера сделаем -4строки, а футеру сделаем высоту +4строки соот. и получим нужный результат:
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
    min-height: 100%;
    /* luv IE shit */
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {height: 4em;}
Вместо строк, можем использовать пиксельные величины, также не забываем о паддингах и бордерах, он тоже играют на высоту/длину!
И HTML
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright/contacts put here</p>
    </div>
</body>


ЗЫ: див под именем push, нужен для глючных браузеров, лайк Опера, что бы текст футера не налазил на контент.
ЗЗЫ: заставить оперу понимать то, что хавает даже ИЕ6, можно скриптом. Или убить доктайп, или сместить боди на 1px, что реализовано в примере ;)
crossbrowser   css

18 июля 2009, 20:32

crossbrowser click event (DOM)

var clickEvent:Object = doc.createEvent("MouseEvents");
clickEvent.initMouseEvent("click");
HTMLElement.dispatchEvent(clickEvent);
С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)
DOM   crossbrowser   javascript

16 июня 2009, 12:28

CSS: Выравниваем плавающие колонки (CrossBrowser)

И так, в чём суть да дело :)

Если браузер нормальный, то мы используем display: table-*, то есть создаём див с display: table-row, а в нём дивы, которые должны быть одинаковой высоты с display: table-cell. Вуаля, остался ИЕ :(

Второй метод, кроссбарузерный:
<style type="text/css">
/* Два дублирующих контейнера col-wrap*
нам нужны, что бы сделать бордеры у колонок
одной высоты, или фон внизу каждого */
.col-wrap1 {
	width:25%;
	background:blue;
}
/* второй контейнер смещён на нужное растояние
влево, с помощью маргин-райт попячен под ИЕ %) */
.col-wrap2 {
	width:200%;
	position:relative;
	left: 100%;
	background:red;
	/* чтобы ИЕ6 не раздвигал контейнер */
	margin-right:-100%; 
}
/* левую колонку с текстом смещаем на длину 
врап2 контейнера */
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
/* что бы ничего снизу не налезло, очищаем */
.clear {
	clear:both;
	font-size:0;
	
	/* тройной презерватив для ИЕ */
	overflow:hidden; 
}
</style>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col1">left column</div>
        <!-- Кол2 занимает всё оставшиеся пространство -->
        <div class="col2">center column</div>
        <div class="clear"></div>
    </div>
</div>



Этот замечательный, и очень простой метод я подглядел вот сдесь, спасибо Сергею.
crossbrowser   css