Position element at bottom right corner of current window

Question

I'm using the following code to send push notifications to the user...

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification hide push-"+type+"' id='notification'>"+message+"</div>");
    jQuery('#notification').show().fadeOut(1200, function () {
        jQuery('#notification').remove();
    });
}

The problem is that the element is not shown at the bottom right corner of where my screen is currently placed, it's showing at the bottom right corner of where the page originally loaded. I'm using the following CSS:

.push-notification {
    background-color: #000;
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    padding: 15px 15px 15px 30px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: 7px center;
    opacity: 0.7;
    filter: alpha(opacity=70);
    vertical-align: middle;
    box-shadow: 4px 4px 4px #000;
    -webkit-box-shadow: 4px 4px 4px #000;
    -moz-box-shadow: 4px 4px 4px #000;
}
    .push-check {
        background-image: url(/image/icons/accept.png);
    }
    .push-x {
        background-image: url(/image/icons/accept.png);
    }

Ideally, if a user starts scrolling while the message is there it'd be nice of the element could move with it.

Answer 1

Try changing

body{
margin: 0;
}
body > .push-notification {
     position: fixed;
}

and try once again with same script.

Answer 2

You can try setting your element's CSS position property to "fixed", if you only have to support modern browsers.

Answer 3

position: fixed

Answer 4

I think jQuery can't read external stylesheets, so you have to give the div a style attribute or you change it with jQuery like this:

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification hide push-"+type+"' id='notification'>"+message+"</div>");
    jQuery('#notification').css({
      right: '20px',
      bottom: '20px'
    }).show().fadeOut(1200, function () {
        jQuery(this).remove();
    });
}

Answer 5

Yeah, you need to look at using position: fixed for browsers that support it then, as IE6 is the only used browser nowadays that doesn't just add

* html .push-notification {
   position: absolute;
}

AFTER the original style rules for the notifications.

If you wanted a javascript solution you could get the document scrollTop/bottom and work out how far from the bottom of the screen to show it. But with this you would need an onscroll event to move it if the user scrolled

Answer 6

Hi Webnet, Try changing the css to:

position: fixed;