Простой способ показать панель сообщений в верхней части страницы

Question

Я хотел бы реализовать что-то похожее на stackoverflow, панель вверху страницы, которая показывает какое-то сообщение.

Я также натолкнулся на этот довольно приятный эффект с отскоком страницы:

http://www.slidedeck.com/features/ (посмотрите на фиолетовую верхнюю полосу, опускающуюся)

Есть ли простой способ сделать это?Может быть, только с jQuery или другим фреймворком?

Answer 1

Как насчет этого? :) Просто добавьте немного причудливой графики, и все будет хорошо!

Answer 2

Я только что нашел отличное и простое решение от blog.grio.com

jsFiddle Demo

function showNotificationBar(message, duration, bgColor, txtColor, height) {

    /*set default values*/
    duration = typeof duration !== 'undefined' ? duration : 1500;
    bgColor = typeof bgColor !== 'undefined' ? bgColor : "#F4E0E1";
    txtColor = typeof txtColor !== 'undefined' ? txtColor : "#A42732";
    height = typeof height !== 'undefined' ? height : 40;
    /*create the notification bar div if it doesn't exist*/
    if ($('#notification-bar').size() == 0) {
        var HTMLmessage = "<div class='notification-message' style='text-align:center; line-height: " + height + "px;'> " + message + " </div>";
        $('body').prepend("<div id='notification-bar' style='display:none; width:100%; height:" + height + "px; background-color: " + bgColor + "; position: fixed; z-index: 100; color: " + txtColor + ";border-bottom: 1px solid " + txtColor + ";'>" + HTMLmessage + "</div>");
    }
    /*animate the bar*/
    $('#notification-bar').slideDown(function() {
        setTimeout(function() {
            $('#notification-bar').slideUp(function() {});
        }, duration);
    });
}

Answer 3

var _show = true;
$(document).ready(function() {

  $('button#showHide')
    .bind('click', function() {
      if (_show) {
        $('div#hideMe')
          .animate({
            'height': '25px'
          }, 750);
        _show = false;
      } else {
        $('div#hideMe')
          .animate({
            'height': '0px'
          }, 750);
        _show = true;
      }
    });
});

body {
  background-color: #003366;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

button {
  cursor: pointer;
  right: 5px;
  float: right;
  position: relative;
  top: 5px;
}

div#hideMe {
  background-color: #FF3399;
  height: 0px;
  overflow: hidden;
  position: relative;
}

div#container {
  background-color: #FFFFFF;
  border: #FFFF00 1px solid;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: relative;  
}

div#contents {
  height: 600px;
  position: absolute;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="hideMe">Congratulations, you just won a punch in the neck!</div>
<div id="container">
  <div id="contents">
    <button id="showHide">clicker</button>
  </div>
</div>

Просто играл с этим. О том, что сделал ваш пример. :)

• Вы можете сделать это около 17,334,259 различными способами. Но это сработает. Просто убедитесь, что ваши ящики расположены относительно, поэтому расширение #hideMe также опускает #container. Или просто расположите его и установите 0px, 0px. или что там ...

Answer 4

Те же люди, которые делают плагин, чья страница вам нравится, делают плагин, чтобы делать то, что вам нравится: http://www.hellobar.com/

Answer 5

Вам нужно получить сообщение для отображения, возможно, через Ajax, но:

http://jsfiddle.net/ZpBa8/4/

показывает, как показать столбец в верхней части в jQuery и является началом

Answer 6

Это легко сделать даже без jquery. Просто используйте DOM, чтобы добавить элемент div к телу и установить его верхнюю позицию на ноль. Установите его ширину как screen.width и высоту, скажем, 50px. И просто инициируйте появление / исчезновение непрозрачности. Как в следующем примере. Этот образец для IE. Прочитайте это для справки. Вызовите initFade как процесс постепенного появления и исчезновения.

var OP = 90;
function processFade() {
    var t = "";
    OP = OP - 3;
    if (OP < 0) {

        clearTimeout(t);
        OP = 90;
        return;
    }
    $("YOUR_DIV_ELEMENT_HERE").style.filter = "alpha(opacity=" + OP + ")";
    if (OP == 0) {
        $("YOUR_DIV_ELEMENT_HERE").style.display = "none";
        clearTimeout(t);
        OP = 90;
        return;
    }
    t = setTimeout("processFade();", 100);
}
function initFade() {
    processFade();
}

Answer 7

Плагин Meerkat jQuery делает это очень хорошо.