4 заметки с тегом

HabraAlert РСС

1 декабря 2009, 9:14

HabraAlert 0.2 Избранное

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


HabraAlert   javascript

30 ноября 2009, 5:24

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

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

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

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

26 ноября 2009, 15:56

HabraALert 0.1 standalone

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

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


HabraAlert   javascript

6 ноября 2009, 7:45

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

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