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

Question

I would like to implement something like stackoverflow 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?

Solution 1

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

Solution 2

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

Solution 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>

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...

Solution 4

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

Solution 5

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/

View more solutions