Question

In a page I would like to display a thanks message after submitting a form. I’ve used this Jquery

$(document).ready(function(){
    $("#contactForm").submit(function(data) {
        $.post('web_contactoPrueba.php', {nombre: $('#nombre').val(), email: $('#email').val(), asunto: $('#asunto').val(), telefono: $('#telefono').val(), comentario: $('#comentario').val(), enviar: 'yes'}, function(data) {
            $("<div />", { class: 'topbar', text: data }).hide().prependTo("body")
            .slideDown('fast').delay(5000).slideUp(function() { $(this).remove(); $(location).attr('href','http://www.delagua.es/index.html');});
        }, 'text')
        return false;
    });
});

and this CSS

.topbar {
    background: #F68A0E;
    height: 60px;
    line-height:60px;
    font-size:25px;
    border-bottom: solid 2px #EEE;
    padding: 3px 0;
    text-align: center;
    color: white;
}

And the current behaviour is that it appears properly on top of the page, but as the submnit button is scrolling down I would like this bar to appear not from the top of the page but from the top of the “current view of the page” (does this make sense?) and without pushing down the content of the page (which is what it does now).

Is it possible to achieve this in a simple way (not the sharpest tool in the box myself)?

Thanks

Answer 1

I think you’ll be able to easily position your notification bar to always be at the top of the current viewport by using some fixed positioning in your CSS properties.

.topbar {
    background: #F68A0E;
    height: 60px;
    line-height:60px;
    font-size:25px;
    border-bottom: solid 2px #EEE;
    padding: 3px 0;
    text-align: center;
    color: white;

    /* properties to "lock" the top bar at the top of the viewport. */
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
}

jsFiddle Example