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


        

Answer 1

Try changing

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

and try once again with same script.

Answer 2

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 3

Try changing the css to:

position: fixed;

Answer 4

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

Answer 5

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 6

position: fixed

• MDN documentation