Deerua about Coding -> Заметки с тегом «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;	
	}
}

• Посмотреть Пример

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо… Код выглядит так:

<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. Работает везде!

• Взято здесь

Есть много проектов, где функционал Джиквери слишком излишен, и используется от сили 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;
}

Попробовать пример можно слева, на тэгах, посмотреть отдельно, будет ссылка ниже.

Ограничения (поддерживает только двухуровневый запрос):

• .класс
• тэг.класс
• #конетйнер .класс
• #конетйнер тэг.класс
• #конетйнер тэг
• всё остальное идёт боком ;)

В планах:

• добавить простейшую рекурсию, для более вложенных запросов;
• расширить функционал изменением стилей;
• добавить методы / выкинуть второй параметр;

• Посмотреть Пример
• Скачать minijQuery.js

Иногда когда делаем блоки с 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 */
}

• Посмотреть Пример

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

Нужен простенький 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, что реализовано в примере ;)

var clickEvent:Object = doc.createEvent("MouseEvents");
clickEvent.initMouseEvent("click");
HTMLElement.dispatchEvent(clickEvent);

С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)

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

Если браузер нормальный, то мы используем 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>

• Посмотреть Пример

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