Twitter Boostrap - getting alert message to stick to the top of the page

Question

I've been trying to get bootstrap's alerts messages to stick to the top like the navbar component but no success.

First, the context:
I'm sending an ajax request through jQuery and then process the response. This part of the idea is complete. All I need to do now is to know how to make an alert message appear at the top of the page right under the navbar that is fixed to the top thanks to bootstrap's navbars. I've tried many things with the affix classes but still can't do it.

Here's where I try to create a div element behaving like the alert message:

success:function(msg) {
    if (msg == "fail") {
        $('body').append('<div class="alert alert-error affix-top"><button type="button" class="close" data-dismiss="alert">×</button><strong>Error !</strong> You can\'t specify a closed status if status is not set as "closed"</div>');
    }
}

So I know for sure this works since the alert message is added but... at the bottom of the page. I want it to be like 5 pixels under the navbar component but can't make this work.

Any idea what I need to set to make this work?

score 4 · Accepted Answer · answered Jun 28 '13 at 13:24

4

If you want an element inserted before all other elements use .prepend(). this inserts the object as the first child instead of as the last like .append():

success:function(msg) {
    if (msg == "fail") {
        $('body').prepend('<div class="alert alert-error affix-top">...</div>');
    }
}

that gets it at the top of the page, then it'll be up to you to make sure it's where you want it thereafter.

Also, I would also look at either using a templating system or build your object using jQuery and avoid long string insertions (though I suppose this may be personal preference).

answered Jun 28 '13 at 13:24

Brad Christie

100,477
16
156
200

It's kind of a work around but I don't simply want it to be before all the rest. I want that kind of "floating" state where it will just be displayed at this place without specifically being at this place in the DOM. See what I mean? – Michael De Keyser Jun 28 '13 at 13:32
1

@MichaelDeKeyser: then you probably want to use absolute positioning and play with the z-index. (something like [this](http://tympanus.net/Development/jbar/) you mean?) – Brad Christie Jun 28 '13 at 13:40
1

@MichaelDeKeyser: I'm not 1005 fluent in bootstrap, but you can take a look at the [stylesheet](http://tympanus.net/Development/jbar/css/style.css) of that example and see how they setup the CSS to make it fixed to the top. – Brad Christie Jun 28 '13 at 13:54

score 3 · Answer 2 · answered Jun 28 '13 at 13:27

You should append it but to the navbar element.

success:function(msg) {
    if (msg == "fail") {
        $('.navbar').append('<div class="alert alert-error affix-top"><button type="button" class="close" data-dismiss="alert">×</button><strong>Error !</strong> You can\'t specify a closed status if status is not set as "closed"</div>');
    }
}

score 0 · Answer 3 · answered Jan 09 '16 at 17:38

you can make a div before the nav bar

<body>
    <div class="alert alert-success navbar-fixed-top" style="display:none; z-index:9999999999" id="dvmsg" role="alert">
        <div class="row">
            <div class="col-lg-offset-6">
                Success
            </div>
        </div>
    </div>
    <div>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
...

then from the JS you can call $("#dvmsg").fadeIn().fadeOut(1000);

Twitter Boostrap - getting alert message to stick to the top of the page

3 Answers3