Simple way to show a message bar at the top of a page

I would like to implement something like s开发者_StackOverflow社区tackoverflow does, the bar at top of the page that shows some message.

I came across this pretty nice effect with a page bounce too:

http://www.slidedeck.com/features/ (look at the purple top bar coming down)

Is there a simple way to do this? Maybe with only jQuery or other framework?

---

How about this? :) Just add some fancy graphics and it should be good to go!

---

I just found a great and simple solution From 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);
    });
}

---

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>

Was just playing around with this. Does about what your example did. :)

• you could do this about 17,334,259 different ways. But this'll work. Just make sure your boxes are positioned relatively, so the expansion of #hideMe pushes #container down too. Or absolutely position it and fix it to 0px,0px. or whatever...

---

You'll need to fetch the message to display, possibly via Ajax, but:

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

shows how to show a bar across the top in jQuery and is a start

---

The same people who make the plugin whose page you love make a plugin to do what you love about it: http://www.hellobar.com/

---

The Meerkat jQuery plugin does this very nicely.

---

This can easily be done without jquery even. Just use the DOM to append a div element to the body and set its top position to zero. Set its width as the screen.width and height to be lets say 50px. And just initiate an opacity fade in/fade out. Like the following sample. This sample is for IE. Read this for reference. Call initFade to being the Fade In and Fade out process.

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