Deerua about Coding: последние заметки с тегом «browsers»

getBoxObjectFor для FireFox 3.6 и выше

Wed, 26 May 2010 16:25:54 +0200

    if(typeof document.getBoxObjectFor == "undefined") {
        document.getBoxObjectFor = function(elem) {
            var obj = new Object;
            var rect = elem.getBoundingClientRect();
            obj.y = rect.top;
            obj.x = rect.left;
            obj.width =Math.abs(rect.right-rect.left);
            obj.height = Math.abs(rect.bottom-rect.top);
            return obj;
        }
    }

Комментарии к заметке

Теги:
browsers > mozilla > firefox
javascript

BUGS: Positon absolute не работает в ИЕ6?

Mon, 30 Nov 2009 05:24:48 +0200

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

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

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

Комментарии к заметке

Теги:
css > position > absolute
browsers > microsoft > Internet Explorer > IE6
HabraAlert
bugs

CSS: Основные баги ИЕ

Mon, 16 Nov 2009 23:13:30 +0200

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;

Комментарии к заметке

Теги:
bugs
browsers > microsoft > Internet Explorer
шпаргалка

Javascript GrayScale Image (Crossbrowser)

Sun, 15 Nov 2009 22:52:03 +0200

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

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

Комментарии к заметке

Теги:
javascript > canvas
browsers > crossbrowser

Fastest javascript ie6 check :)))

Thu, 12 Nov 2009 21:42:57 +0200

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

Комментарии к заметке

Теги:
browsers > microsoft > Internet Explorer > IE6
javascript

FireFox Speeeeeeeed UP

Thu, 22 Oct 2009 16:36:41 +0200

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

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

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

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

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

Комментарии к заметке

Теги:
browsers > mozilla > firefox

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

Wed, 21 Oct 2009 05:57:09 +0200

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

<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->

И шо, и как? Всё довольно просто ;))

JS пишет перед стилем комент
На кондишинал.комментс эта штука закроется
Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
Работает везде!

Взято здесь

Комментарии к заметке

Теги:
javascript
css
browsers > crossbrowser
magik

Javascript: minijQuery 0.0.0.1 alpha :D

Sat, 19 Sep 2009 11:15:08 +0200

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

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

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

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

В планах:

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

Комментарии к заметке

Теги:
browsers > crossbrowser
javascript > framework > minijQuery

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

Tue, 25 Aug 2009 11:10:32 +0200

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

}

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

Комментарии к заметке

Теги:
browsers > crossbrowser
css

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

Thu, 13 Aug 2009 11:06:00 +0200

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

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

Комментарии к заметке

Теги:
browsers > crossbrowser
css