2
UPDATE 3: РешенныеЦель системы уведомлений
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#notifications").hide();
var height = 0;
var count = 0;
$("#show").click(function() {
count += 1;
$("#notifications").append("<div class='notification' id='n" + count + "'><span>notification " + count + "</span><input type='button' class='notification_button' id='b" + count + "' value='x' /></div>").show();
height += $("#n" + count).height();
$("#content").css("padding-top", height + "px");
});
$(":button.notification_button").live('click', function() {
var number = parseInt($(this).attr("id").substring(1));
height -= $("#n" + number).height();
$("#content").css("padding-top", height + "px");
$("#n" + number).remove();
});
});
</script>
<style type="text/css">
body {
padding:0px;
background-color:#00ff00;
}
#notifications {
background-color:#ff0000;
z-index:9999999;
position:fixed;top:0px;left:0px;
width:100%;
}
.notification {
height:35px;
}
.notification_button {
float:right;
}
</style>
</head>
<body>
<div id="notifications"></div>
<div id="content">
<input type="button" id="show" value="show" /><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla metus nibh, sit amet posuere lectus. Donec neque elit, tristique eget aliquet a, sagittis ut massa. In vestibulum pellentesque massa sit amet ullamcorper. In eget diam eros, non volutpat purus. Maecenas aliquam ultricies tristique. Aliquam venenatis laoreet lectus et molestie. Fusce adipiscing molestie urna, sit amet fringilla sem ornare eu. Phasellus a felis ac quam consectetur scelerisque nec vitae est. In posuere malesuada aliquet. Nulla ultrices vulputate nisl et ullamcorper. Aliquam erat volutpat. Cras tortor justo, porta vitae eleifend sed, egestas non purus. Nullam massa odio, dapibus vitae hendrerit at, dictum et ante. Quisque condimentum justo eu arcu sodales vitae auctor massa aliquet. Vivamus tristique suscipit sem, id venenatis velit convallis id. Phasellus sit amet magna ut augue aliquam porttitor.</p>
<p>Sed vitae mauris nulla, at sagittis tellus. Proin dapibus congue massa non rutrum. In orci nulla, auctor vitae hendrerit id, mollis quis enim. Mauris blandit libero sed risus vulputate ornare vitae nec sapien. Sed eu ligula ut nulla faucibus sagittis non ac libero. Suspendisse laoreet bibendum consequat. Duis enim massa, rutrum ut iaculis quis, dignissim et neque. Quisque ac est felis, vel dapibus erat. Nulla facilisi. Nulla eros augue, ornare sit amet adipiscing vel, interdum ac dui. Aliquam orci risus, interdum cursus tincidunt quis, euismod sit amet sapien. Vivamus sollicitudin tempus risus, in ullamcorper lectus sagittis non. Phasellus nec gravida ante. Mauris vitae quam a nisl ornare rutrum.</p>
<p>Aliquam id neque ut dui placerat tincidunt. Nunc feugiat arcu sed risus dictum lacinia. Proin at purus eros. Sed adipiscing tincidunt nulla vitae molestie. Quisque sapien magna, molestie placerat tincidunt ut, porta eget arcu. Aliquam facilisis faucibus justo, ut placerat massa sagittis ut. Quisque ullamcorper lacinia tellus, nec mattis augue euismod sit amet. Nunc tristique congue odio ut consequat. Cras eget orci sed erat ullamcorper consectetur. Phasellus blandit, neque sit amet varius bibendum, ipsum purus vehicula tellus, at eleifend tortor turpis interdum erat. Quisque faucibus posuere accumsan. Fusce sem ipsum, tempus vel pharetra eleifend, scelerisque at justo. Nulla risus eros, faucibus iaculis sagittis nec, ultricies hendrerit neque.</p>
<p>Curabitur neque dolor, convallis in tempor eget, ultricies a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius felis ut leo vehicula vehicula. Phasellus tellus mi, pretium ac vehicula non, convallis sed turpis. Nullam at auctor neque. Proin ac orci vel mauris mollis suscipit nec eget felis. Phasellus vel laoreet enim. Sed at mi in est feugiat suscipit non non mauris. Suspendisse vel enim lorem, et scelerisque quam. Aenean elementum elementum mi, quis dignissim dui rhoncus et. Integer viverra luctus vulputate. Maecenas nisi libero, pharetra id vestibulum eget, dignissim elementum ipsum. Vivamus quis eros nibh, in commodo ligula. Integer mi odio, fringilla sit amet sagittis sit amet, congue eget dui. Maecenas sollicitudin ante a nulla placerat congue. Integer interdum posuere diam a fringilla. Aenean accumsan orci nec sem aliquam elementum. Sed in quam eu urna lobortis eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Mauris pulvinar, nisi vitae facilisis fermentum, mi eros ultricies ipsum, non lacinia nunc turpis vel tortor. Nunc vel sapien ut diam porttitor euismod at quis tortor. Aenean quis lacus id dolor luctus eleifend in id arcu. Suspendisse potenti. Duis dui libero, dictum quis elementum eu, egestas ac dui. Maecenas egestas dapibus ipsum. Vivamus ut ipsum in tortor ultrices imperdiet. Etiam augue felis, gravida quis dictum at, tempus eget arcu. Duis elementum diam sit amet sapien luctus scelerisque. Proin non purus nulla. Cras vehicula, tellus vitae pellentesque sagittis, lectus nisl faucibus ligula, nec tincidunt risus elit luctus risus. Praesent sit amet commodo urna. Maecenas quis dui tellus, nec semper elit. Praesent porta, augue fringilla vehicula porta, diam lectus gravida sapien, sed molestie augue tellus in risus. Vivamus lectus dui, ultrices nec dapibus vitae, posuere eget velit. Donec scelerisque molestie lorem, in convallis justo consequat non. Sed sed enim eu nisl rutrum placerat.</p>
</div>
</body>
</html>
UPDATE 2:
Я теперь добавление Div к вершине, но содержание не сбрасываются: http://jsfiddle.net/qTw9P/7/
Не уверен, что я делаю неправильно.
UPDATE 1:
Следующая jsfiddle корректно работает interms показать/скрыть уведомление, которое не скрывает какого-либо содержания:
Однако при прокрутке, уведомление уходит с страницы, которая прокручивается, она должна оставаться в верхней части видимой страницы.
ORIGINAL ВОПРОС:
Может кто-то пожалуйста, мне точку в системе уведомлений/плагин/учебник, который создает уведомления, аналогичные уведомления, представленные здесь, в StackOverflow?
В основном, уведомления должны быть штабелируемыми, и они не должны перекрывать страницу, то есть фактическое содержимое страницы перемещается вниз, так что ничто на странице не покрывается уведомлениями. В то же время уведомления всегда должны оставаться в верхней части видимого экрана даже при прокрутке. В основном, как работают уведомления о загрузке в стеке.
@ Frédéric Hamidi, уведомления в этой ссылке наведите указатель мыши на содержимое веб-страницы, чего я не хочу. Я хочу, чтобы уведомления оставались наверху, но перемещали содержимое страницы вниз, поэтому ничего не перекрывается, например, как работают уведомления о стеке. – oshirowanen
true, даже jBar использует только оверлеи. Посмотрите на [Уведомление о предупреждении, аналогичное тому, как функции stackoverflow] (http://stackoverflow.com/q/3718125/464709), затем :) –
Основываясь на css и комментариях Криса в этом сообщении, он/она хочет уведомление должно быть в верхней части страницы без нажатия на содержимое вниз. Я хочу нажать вниз, но в то же время сохраняйте уведомление на верхней видимой странице при прокрутке. – oshirowanen