Deerua about Coding -> Заметки с тегом «browsers»

Досадная штука этот ИЕ6. Стал забывать о нём (и не зря, за 2 года упал с 65% до 11%), но он всегда вылазит где-то %) И нужно с ним бороться, опять и опять.

В этот раз все банально просто, блок непосредственно в боди, с {positon:absolute­}, становится длиной 100% и просто поверх всего. После долго-го рытья по гуглу, оказывается что нужно сделать body{positon:relative­}, и только тогда он начинает себя нормально вести :)

За одно исправил свой HabraAlert, теперь он 0.1.1 :)

1. Не работает центрирование с margin: 0 auto; — используем text-align
2. Видишь лесенку блоков, двойной margin, в фоне списков проблемы — display: inline;
3. Минимальная высота блока не минимальна — font-size: 0; или overflow: hidden;
4. Overflow не работает — position: relative;
5. Не кушает padding — используй хак для высоты или ширины
6. Не работает min-height — height:auto !important; height: yourminheight px;

Как сделать из рисунка, с помощью 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;	
	}
}

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

var is_ie6 = (window.external &&
typeof window.XMLHttpRequest == "undefined");

В JS-консоле просто вставляем команду, и со всех скуельлайт-файлов изымается лишнее, они худеют, остаётся только нужное и вакуум

Components.
classes["@mozilla.org/browser/nav-history-service;1"].
getService(Components.interfaces.nsPIPlacesDatabase).
DBConnection.executeSimpleSQL("VACUUM");

Components.classes["@mozilla.org/browser/nav-history-service;1"].getService(Components.interfaces.nsPIPlacesDatabase).DBConnection.executeSimpleSQL("VACUUM");

Для тех, кто ленив, есть плагин автоматизирующий это действие

Удивительное рядом, ускорить фокс и «убрать» утечки памяти помогут два аддончика:

• AFOM
• AFOM Plus

После этой магии, грузится «почти» моментально, ест не больше 50МБ ;)
зы: ставить или/или. В реале они все «лишнее» кидают в своп, зато оперативка чиста ;)))

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

<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 мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)