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

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

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

Зайдите на любую страницу, где много картинок, и вставьте эту строку в адресную строку javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);

Что же там происходит? ;)

R=0; 
x1=.1; 
y1=.05; 
x2=.25; 
x3=1.6; 
y2=y3=.24; 
x4=x5=300; 
y4=y5=200;
/* Собираем все картинки не старнице */
DI=document.getElementsByTagName("img"); 
DIL=DI.length;  /* считаем их */
function A(){
	for(i=0; i-DIL; i++){
		DIS=DI[ i ].style; 
		DIS.position='absolute'; /* делаем позишон абсолюте */
		/* Дальше по тригонометрической формуле начинаем вращать */
		DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; 
		DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"
	}
	R++
}
/* Вращать с задержкой в 50мл.сек */
setInterval('A()',50); 
void(0);

Свершилась моя давешняя мечта, которой с два года, собрал я все свои аддончики в одну коллекцию, и теперь их можно установить одним кличком(в скором времени), УРА! %)

• Посмотреть на Мозилла.орг

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

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

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

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

Для оперы10 и фокса3.5 достаточно написать в ссылке rel=’sidebar’, оно добавит ссылку в избранное (закладки). В качестве урла возмёт ссылку, а в качестве названия тайтл ;)
Для остальных пригодится такая функция ;)

function addBookmark(title, url, obj){
	if (!url) url = location.href;
	if (!title) title = document.title;
	if ((typeof window.sidebar == "object") && 
			(typeof window.sidebar.addPanel == "function")) 
		window.sidebar.addPanel (title, url, "");//Gecko
	else if (document.all) 
		window.external.AddFavorite(url, title); //IE4+
	else if (window.opera && document.createElement) {
		obj.setAttribute('rel','sidebar');
		obj.setAttribute('href',url);
		obj.setAttribute('title',title);
	}
	else {
		alert("Что бы добавить в закладки\
			Нажмите ctrl+D (ctrl+T старая опера);");
		return false; //IF Opera 6
	}
	return true;
}

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

В Хроме нету пока такого функционала ;) и у многих других, потому для них алерт :D

Иногда, что бы легко ориентироваться на странице, нужна помощь посторонних сил %)) В прямом смысле этого слова ;)

Етой силой есть джаваскрипт (javascript) :D А для ориентации на странице, мы расширим функционал скролл-баров. То есть, проанализируем текущий документ и построим из него упрощенную схему для скроллбара.

Эта штука запатентирована на Дизайн-бюро Артёма Горбунова, но они предложили идею УИ, а её реализации на джаваскрипте смотрите ниже:

• Пример iScroll
  Автор потерялся
• Пример JavaScript Scroll
  автор Sergey Voronkov
• Инфоскроллер
  автор Сергей Чикуёнок

Иногда див с большим объёмом информации нужно поскроллить, но типичный скролл не вписывается в дизайн, и нужно придумать кнопки. На помощь приходит javascript :D
У любого блочного элемента в html, есть css свойство, которое можно изменить только с помощью javascript о_О
Знакомьтесь, это scrollLeft и scrollTop :) Они представляют собой отступ (скролл) от левого края и от верха соответственно ;)
Перейдем к делу! Управлять ими очень даже легко

document.getElementById("test").scrollLeft += 5;
document.getElementById("test").scrollLeft -= 5;

Сдесь мы блочный элемент с id=«test» сначала двигаем вправо на 5px, потом влево. Аналогично делается для направлений вниз/вверх!

Пример:
Скроллим Вниз Скроллим Вверх

Перерыл пол интернета в поисках этого «пнгфикса», вариаций более-менее достойных было с 10, но на сложной вёрстке они убивали дизайн полностью, и фиксили не до конца, кроме одного!

Представляю, это DD_belatedPNG (сейчас версия 0.0.7альфа но он уже может всё!) и как они говорят, это «Medicine for your IE6/PNG headache!»

• Скачать DD_belatedPNG

Что же он может:

• фиксить все png, как просто картинки (<img>) так и динамически вставляемые;
• фиксить все фоновые png (как одиночные так и повторяющиеся) для любых тегов, при этом нормально обрабатывается background-position and background-repeat;
• фиксить инпут в виде картинки (<INPUT type=«image»/>);
• Автоматически добавляет позишон:релейтив (для ИЕ6 очень важно);
• не использует картинки (blank1px.gif) для фиксов и технологию ДиректИкса (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader), то есть нужен только джаваскрипт! Использует технологию MS, что называется VML (//Vector Markup Language//);
• после фикса, у всех элементов сохраняется кликабельность;
• не нужно уродовать css с помощью **behavior: url**
• + он фиксит :hover для ИЕ6!

Есть одно но! К тегам <TR> и <TD> лучше не применять ;) да и вообще кому нужна вёрстка на таблицах ;)

Рецепт:
Скачайте Джаваскрипт, положите в корень сайта например и подключаете

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

Подключаете только для ИЕ6, и только для нужных элементов! Оптимизирован для ИЕ6! Может выбирать как по классам, так и по айди, так и просто по тегам, кому как удобно! Например я использовал такое подключение %) DD_belatedPNG.fix(’img, div, li, a’);, так как дизайн был полностью из пнгшек!

зы: DD_belatedPNG is free software under the MIT License.
ззы: Кто не хочет нагружать страницу каким-либо джаваскриптом, для того есть ещё один метод, и называется он

• PNG8 с альфа каналом.

Есть на свете браузер клёвый ИЕ (кИЕ) и хорошая контора Microsoft, и любит эта контора в свой кИЕ напихать функций нестандартных, вот одина из них «removeNode». По хорошему должна быть функция removeChild :) , но что делать, если нужно поддержать какой нить огромный проект, типа Битрикс, что очень любит фишечки с кИЕ :) Для этого можно в прототайп добавить небольшую обёрточку, и жизнь станет на порядок легче ;)

if(window.HTMLElement){
  HTMLElement.prototype.removeNode = function(removeChildren) {
    if (Boolean(removeChildren) )
      return this.parentNode.removeChild(this);
    else {
      var r=document.createRange();
      r.selectNodeContents(this);
      return this.parentNode.replaceChild(r.extractContents(),this);
    }
  }
}

зы: Это же касается чудесных кИЕ методов для options.remove

JavaScript setAttribute «class» not work in IE

//Хорошо работает везде, кроме ИЕ - good for all but not IE
setAttribute(’class‘, ‘value’);
//в ИЕ работает вот так - IE only
setAttribute(’className‘, ‘value’);
//везде работает вот так ;) - good for all browsers
someElement.className = ‘value’;