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

HabraAlert 0.2

Tue, 01 Dec 2009 09:14:31 +0200

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

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

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

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

Теги:
HabraAlert
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

HabraALert 0.1 standalone

Thu, 26 Nov 2009 15:56:12 +0200

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

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

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

Теги:
HabraAlert
javascript

Javascript: Делаем ненавязчивый алерт (попап хабр-стайл)

Fri, 06 Nov 2009 07:45:06 +0200

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

<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);
}

Вкратце:

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

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

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

Теги:
HabraAlert
javascript