Clear each notification after a given timeframe javascript

Question

I'm working on some type of simple notification system.

Here is the jsfiddle: https://jsfiddle.net/t9pvmzhh/3/

I don't know why, but jsfiddle wont display all 4 of the notifications although it works just fine on my page. I'm probably doing something wrong, you can also help me correct the jsfiddle code...

I have started working on clearing each notification after 1000ms, but got stuck at the end of the JS code. The "id" var returns clear0(), clear1(), just as intended, but now I have to call a function and function id { } isn't working. Is that even possible? Can I call a function like this, or I need to find another workaround (I am probably gonna add an X to close the notification, but auto-closing would be nicer)

HTML

<div class="notificontainer" id="notificontainer">
</div>

CSS

.notificontainer {
      position: fixed;
      border: 1px solid blue;
      width: 40vw;
      height: 20px;
      left: 30%;
      bottom: 10px;
    }

    .notification {
      display: none;
      transition: visibility .5s;
      position: absolute;
      border: 1px solid #44DDFF;
      background-color: rgb(0, 0, 0);
      width: 50%;
      height: auto;
      padding: 0;
      left: 25%;
      bottom: 0px;
      color: #ffffff;
    }

    .tooltipheader {
        margin: 0px;
        padding: 2%;
        text-align: center;
        border-bottom: 1px groove #949494;
        background-color: rgba(165,165,175, .1);
    }

JS

notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");

var counted = 0;

function notification(what) {
  counted++;
  var elem = document.getElementById("notificontainer");

  elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\"" + what + "</div></div>";
  document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
  document.getElementById("noty" + counted).style.display = "initial";

  var id = "clear" + counted + "()";

  window.setTimeout("clear" + counted, 1000);
}

The link is at the start of the thread. I don't know why there are no notification boxes on the preview but it works on my page tho — , Feb 03 '17 at 14:23
I noticed I didn't close the div properly in the JS code... fixing the jsfiddle right now https://jsfiddle.net/t9pvmzhh/2/ here is a new link — , Feb 03 '17 at 14:37
ok, I am trying to decipher what you're trying to do. You want to display a "notification" at the bottom of the page for a time period and then you want it to dissapear correct? There are a few ways to accomplish this. Your going down one path but maybe I can help if there was a bit more clarity. — Jon Glazer, Feb 03 '17 at 14:38
Do you have a requirement for writing your own? there a 1001 notification plugins out there that are very simple to use and work very well. — Tim B James, Feb 03 '17 at 14:40
I want to learn JS, and I see no better way than writing code on my own. I know about the 1 billion jquerry plugins, but I don't want to use them. — , Feb 03 '17 at 14:43
@JonGlazer That is correct. So when the function I mentioned I don't know how to call removes the notification, counted also goes down. So they should stack above each other just nicely. — , Feb 03 '17 at 14:45
@AcidBurn updated the jsfiddle link. Now this looks exactly as on my page. Thanks — , Feb 03 '17 at 14:47
Ok, I applaud your wanting to learn JS. Once you get there, I suggest you look at jquery. Its easier to do stuff like this in jquery but I'll try to fomulate an answer in simple javascript. One thing that comes to mind right away is that you are accumulating notifications and positioning them up the page absolutely. There's not really a problem with this except as they go away then next ones will still appear above the vanished ones. I think you want to create a notification area that accumulates notifications and "grows" and "shrinks" as they appear and disappear. Correct? — Jon Glazer, Feb 03 '17 at 15:05
True. I do not fully understand css positioning as I do not pay much attention to it. Neither did now, just wanted the notifications to work properly. Actually im using document.getElementById(id).remove() to completely remove a notification now, once the timer expires. Acid's answer is working great for me. Now i will try to edit the css file and make them appear in the notificationcontainer, instead of floating above it. — , Feb 03 '17 at 15:08
ok, I'll let him continue then. Seriously take a look at jquery when you get a chance. — Jon Glazer, Feb 03 '17 at 15:10
I will, I just want to get bit better at understanding js first. I'm sure jq will make my life easier — , Feb 03 '17 at 15:14

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

You can pass parameters to the setTimeOut()'s function callback. How can I pass a parameter to a setTimeout() callback?

setTimeout(function(param){
    console.log("noty"+param);
    document.getElementById("noty" + param).style.display = "none";
}.bind(null,counted), 3000);

edited May 23 '17 at 12:24

Community

1
1

answered Feb 03 '17 at 14:56

acid_srvnn

693
8
15

1

Yes :) ... and the same approach is in the JSFiddle I created: https://jsfiddle.net/o3qfoxwb/3/ – pesho hristov Feb 03 '17 at 15:07
This works great. Mind explaining what the bind(null, counted) does? – Feb 03 '17 at 15:09
1

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind function().bind can be used to set the parameters to be used when it is called later. In your case, the current value of variable counted needs to be sent to clear. Its value wont be the same after timeout. So you need to bind it initially itself. – acid_srvnn Feb 03 '17 at 15:59
In my example code, i have just hidden the notification. Do remove the element as specified by the other answer. – acid_srvnn Feb 03 '17 at 16:00
@peshohristov tried this as well, but the problem i encountered is: ie: The user is clicking ~5 times in 2 seconds. Notifications are displayed properly, but the first one isn't removed after 2 seconds, it's removed 2 seconds after the second one is removed, and so on, and so on. fiddle: https://jsfiddle.net/o3qfoxwb/4/ . the button isn't working for some reason... I hope you understand what i mean. – Feb 03 '17 at 16:22
I played a little bit, and check this out: https://jsfiddle.net/x64mct0m/1/ ... several things to note: 1) Use event delegation (`document.addEventListener...`), not `onclick` attribute of the button. 2) When call `clearNotification` - always generate the id of the notification BEFORE that. Otherwise it will get latest value of `counted` and will work incorrectly. 3) Instead of putting `display:initial` use `display:block`. It's better supported and for some reason `initial` wasn't working in IE. – pesho hristov Feb 04 '17 at 17:49

score 0 · Answer 2 · edited May 23 '17 at 11:53

Updated Fiddle:

https://jsfiddle.net/t9pvmzhh/5/

function clear(id) {
    document.getElementById("noty"+id).parentElement.removeChild(document.getElementById("noty"+id));
}

Basically, you haven't defined the clear function, so the call wasn't successfull.

Also, to "remove" an item with pure js, you can't remove the item directly, only his parent can:

As James said, the DOM does not support removing an object directly. You have to go to its parent and remove it from there. Javascript won't let an element commit suicide, but it does permit infanticide... – Mark Henderson Aug 1 '10 at 23:36

Remove element by id

Try to always work with the debug window open, so you can check this kind of stuff.

Clear each notification after a given timeframe javascript

2 Answers2