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

Возникло много багов и пожеланий, поэтому переделал:

• Исправил CSS ошибки, добавил pointer: cursor;
• Разделил CSS для ИЕ и остальных;
• Исправил багу с позиционированием в ИЕ6;
• Избавился от js.ошибки NS_ERROR_DOM_NOT_FOUND_ERR
• Сделал возможности загрузки скрипта как в head так и в body;

• Посмотреть здесь

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

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

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

После того, как пригодился мне уже в 5 проектах, сделал стендалоун решение, которое работает после простого подключения файла JS после body. Почему не сделал загрузку в head, спросите вы, потому что на страницах зачастую много инфы, и ждать пока загрузится весь DOM долго, а ерроры, алерты лучше видеть сразу ;).

В решении используется сразу несколько моих статей, и работает довольно просто:

• динамически загружаем CSS стиль
• вставляем тег, сразу после body
• ну и сам JS алерт

• Скачать скрипт
• Пример

Тут всё просто, делаем контейнер в начале боди, с абсолютным позиционированием, или просто вставляем пустой тег, или можем по желанию создать тэг с помощью ДЖс и вставить в начало документа

<div id="messages"></div>

Дальше небольшой стиль, в котором мы сделаем уголки и прозрачности

div#messages {
	position: absolute­;
	top: 0px­;
	right: 0px­;
	width: 250px­;
	margin: 0px­;
	padding: 7px­;
	background: transparent­;
	z-index: 2­;
	position: fixed­;
}
	div#messages div {
		color: #fff­;
		padding: 7px­;
		margin-bottom: 7px­;
		
		-moz-border-radius: 5px­;
		-webkit-border-radius: 5px­;
		-khtml-border-radius: 5px­;
		border-radius: 5px­;
   	
    -moz-opacity: 0.65­;
    -khtml-opacity: 0.65­;
    opacity: 0.65­;
    filter:alpha(opacity=65)­;
		
		background: #888­;
		font: Georgia 12px #fff­;
	}
	div#messages div.error {background: #98001b­;}	
	div#messages div.message {background: #0d8529­;}
	div#messages div.warning {background: #dd6­; color: #333­;}

А теперь JS

$ = function (oid){ return document.getElementById(oid); }
message = function (mtext, mtype, howlong) {
	var mtype = mtype || 'message';
	var howlong = howlong || 5000;
	var alarm = document.createElement ('div');
	alarm.className = mtype;
	alarm.innerHTML = mtext;
	
	alarm.onclick = function () {
		$('messages').removeChild (alarm);
	};
	
	$('messages').appendChild (alarm);
	setTimeout (alarm.onclick, howlong);
}
error = function (mtext, howlong) {
	var howlong = howlong || 10000;
	message(mtext,"error",howlong);
}
warning = function (mtext, howlong) {
	var howlong = howlong || 7000;
	message(mtext,"warning",howlong);
}

Вкратце:

• Создаём дивку
• Вешаем класс по типу
• Дальше вставляем текст
• Вешаем ивент, чтобы алерт исчез по клику
• Вставляем в контейнер
• и убираем по таймауту

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