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?

I had the same question too but in the end, I go with writing a few simple lines of css & jquery. I don't want to depend on libs too much. — ngduc, Mar 15 '11 at 00:42
@abiusx: I posted a link, if you click on it you can see what exactly it does — dynamic, Mar 15 '11 at 00:48
@yes123 that's hello bar. i have some invites left do u want an invite? — KJYe.Name, Mar 15 '11 at 00:59
are you joking me? $99 for something i could write in maybe 30 minutes? — mpen, Mar 15 '11 at 01:01

HChen · Accepted Answer · 2011-03-15T02:44:50.397

9

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

edited Mar 15 '11 at 02:44

answered Mar 15 '11 at 02:12

HChen

2,141
13
12

Hmm seems pretty nice i will test it tomorrow cos now i am o. Iphone and it didn't seem to scroll down the rest of the page as the example i posted – dynamic Mar 15 '11 at 02:16
this is the most closest thing that I asked.. even tho the effect happens over the page – dynamic Mar 15 '11 at 09:41
Do i need to include that jquery.easing.1.3.js too? what's that – dynamic Mar 15 '11 at 09:42
@yes123 Yes since the vanilla jQuery only has the "swing" & "linear" effects, you will need to include that to have the bouncy effect that you want. (Or you could just include the one specific effect that you want) – HChen Mar 15 '11 at 13:59
Thats a jq plugin - jquery uses protoypal inheritance to extend functionality. It takes care of the penner easing equations. Just link it after jquery in your markup. – Bosworth99 Mar 15 '11 at 14:01
@both: thanks! how I could modify it to move bottom the entry page (like slidedeck.com ?) – dynamic Mar 15 '11 at 14:03
@yes123 just change the two instances of `top` in css to `bottom`. – HChen Mar 15 '11 at 19:28
@hoachi that would move the message bar at the bottom of the page, it would not slide down the content – dynamic Mar 15 '11 at 19:50

score 8 · Answer 2 · answered Aug 01 '14 at 16:13

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

Amazing! Just what I was looking for. One small update size() should be length — Ron, Jul 03 '22 at 18:52

score 2 · Answer 3 · edited Dec 11 '17 at 01:11

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

hm that's a good starting point, i copied your code here: http://jsfiddle.net/7DHqR/ Now why we don't try to add that bounce effects of http://www.slidedeck.com/features/ ? +1 in the meanwhile — dynamic, Mar 15 '11 at 01:23
for the bounced easing, you just need to implement one of the many easing plugins, then its as easy as $('div#hideMe').animate({'height' : '25px'},{ duration:500, easing:"bounceEaseOut"}); (syntax to match plugin)... — Bosworth99, Mar 15 '11 at 02:14

score 1 · Answer 4 · answered Mar 15 '11 at 00:58

1

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

answered Mar 15 '11 at 00:58

Gary Corbett

139
4

1

that's awful, you just reimplemented the toogle jquery method. I suggest you to learn more from here: http://api.jquery.com/toggle/ and btw yuor code deosn't do what i asked – dynamic Mar 15 '11 at 01:21

score 1 · Answer 5 · answered Mar 23 '11 at 01:47

1

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/

answered Mar 23 '11 at 01:47

Daniel Crenna

3,326
1
24
34

sorry but it's only on invite? – dynamic Mar 23 '11 at 10:43

score 0 · Answer 6 · answered Mar 15 '11 at 01:21

0

The Meerkat jQuery plugin does this very nicely.

answered Mar 15 '11 at 01:21

orip

73,323
21
116
148

score 0 · Answer 7 · edited Dec 11 '17 at 01:16

0

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

edited Dec 11 '17 at 01:16

Nerdroid

13,398
5
58
69

answered Mar 15 '11 at 08:20

Ashwin Krishnamurthy

3,750
3
27
49

thanks man, but I asked an how to for the bounce too :) Look the page bounce when the bar shows: http://www.slidedeck.com/features/ is that too hard to do? – dynamic Mar 15 '11 at 09:18
Bounce too eh? Just repeat the aforementioned process but instead of style.filter replace it with style.top (Dont forget to set the position to absolute) and have a running variable (Just like OP from above) till whatever height you want. Call this new function after you clear timeout but before return in the aforementioned function.So that there is a fade in, immediately followed by a bounce (And doesnt slow down). Try it out and let me know. Otherwise ill paste the combined code (non-jquery) – Ashwin Krishnamurthy Mar 15 '11 at 11:03

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

7 Answers7

jsFiddle Demo