Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show notification on top of screen?

Tags:

html

jquery

css

I would like to use jQuery Notifications plugin, but it always puts the notification bar on the top of the page. So if the page it big, one have to scroll up to the top to see the notification.

Would it be possible to have the notification always show up in the top of the browser window, so the user won't have to scroll up to the top of the page?

This is the CSS, if that's where such a thing should be changed?

/* jQuery Notifications plugin - http://programmingmind.com */
/* notification container */
#jquery-notifications {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100000;
}
#jquery-notifications p {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  border-bottom: 2px solid;
  /* style property for the close text */
}
#jquery-notifications p a {
  position: absolute;
  right: 10px;
  margin-right: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding-right: 5px;
  padding-left: 5px;
}
#jquery-notifications .notice {
  background: #6c9ffc;
  color: #061a72;
  border-color: #061a72;
}
#jquery-notifications .success {
  background: #96f96f;
  color: #045419;
  border-color: #045419;
}
#jquery-notifications .warning {
  background: #f7ae57;
  color: #753903;
  border-color: #753903;
}
#jquery-notifications .error {
  background: #f97c6f;
  color: #570f01;
  border-color: #570f01;
}
like image 616
Sandra Schlichting Avatar asked Dec 04 '22 22:12

Sandra Schlichting


1 Answers

Not knowing how the markup is actually used, I can't give you an exact fix.

But adding position: fixed; to the container (#jquery-notifications) should make it show up on top at all times.

like image 132
JohnP Avatar answered Dec 08 '22 14:12

JohnP