codrops / NotificationStyles

Various simple ideas and effects for unobtrusive notifications on a website.
931 stars 124 forks source link

creating stacks #6

Open ledzgio opened 9 years ago

ledzgio commented 9 years ago

It seems that is not possible to create stacks of notification, right now all the notifications are overlapped each other.

Any hint?

juriansluiman commented 9 years ago

Does this comment solve your problem?

If you want to make it support multiple notifications add: position: relative; float: left; to the .ns-box rule of ns-default.css (line 3) and remove the position: fixed; from it.

JaviPG commented 8 years ago

I have the same problem.

Thanks for your answer juriansluiman but it doesn't enough for solve this problem. If we change "position:fixed" to "position:relative" the website is displaced.

I think that the solution is create a new div with position fixed and relocate this box where we want show the notifications, then put all notifications created in this box.

I'm trying do it but i don't get good results yet. Any idea?

Thanks a lot!

monochromer commented 7 years ago

You should create a container with position: fixed and place the elements in it.

sivajisanapala commented 7 years ago

Even, I am looking for the same. Is there any possibility that, the latest triggered notification comes on the the top of the notifications stack atleast.

paulvales commented 7 years ago

my solution:

<div id="incoming"></div>
...
//document.getElementByClassName("incoming") - doesnt work
new NotificationFx({
         wrapper :  document.getElementById("incoming"),

           ...
});

in ns-default.css:
.ns-box {
    position: relative;
    ...
}
#incoming{
    position: fixed;
    right: 10px;
    bottom: 10px;
}
sivajisanapala commented 7 years ago

I am not sure about the above solution but, I could able to achieve it by incrementing the latest triggered notification's z-index by 1with in the stack of notifications. It worked for me.