detecting and hiding dynamically creating div after a specific seconds (not onclick)

Question

i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:

<div class="message-sent">Your Message has been sent</div>

Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!

score 0 · Answer 1 · edited Jul 17 '17 at 08:46

0

You should try looking into the setTimeout function. Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO. Anyway, assuming you want to hide every member of the message-sent-class, it goes something like this:

setTimeout(function(){
    $('.message-sent').hide();
}, 2000)

In which the 2000is the variable that indicates the time (milliseconds)

edited Jul 17 '17 at 08:46

Jishnu V S

8,164
7
27
57

answered Jul 17 '17 at 08:42

Matthias Raes

75
6

hi friend...this code works with already existing div. But in my case '.message-sent' div is created after a long time after clicking a button. – Shaiju Elayidath Jul 17 '17 at 09:04
Could you add the code where you dynamically create the div? – Matthias Raes Jul 17 '17 at 09:13
if(!$mail->send()) { echo 'Message could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; } else { echo '
Your Message has been sent
';} once my mail is success with php, then this div is generating. But i can't make hide this after a specific time with jQuery as this is not existing previously in document. – Shaiju Elayidath Jul 17 '17 at 09:28
If I'm correct, CSS is added no matter when your element gets added. So if you were to add a line in your CSS like this: `.message-sent{ display: none }`After that, you change that line of code. I don't know exactly how to do it, but I found an answer here https://stackoverflow.com/questions/17452726/manipulating-css-with-javascript I'll update my answer – Matthias Raes Jul 17 '17 at 13:14

score 0 · Answer 2 · answered Jul 17 '17 at 08:43

0

you can add a style display:none.

you can add the style after time out (3000ms) like so:

setTimeout(function(){ 
  document.getElementsByClassName("message-sent")[0].style.display="none"; 
}, 3000);

note: it is better if you use an id instead of a class to identify your div.

answered Jul 17 '17 at 08:43

mygeea

463
3
10

hi friend this is not working. You code is good for already existing div. But for dynamically generating div, it is not working. The 'message-sent' div is not existing in the document on load. it is generating later on click of a submit button. – Shaiju Elayidath Jul 17 '17 at 09:02
Well if u call the function after the click event then the div should be there later. – mygeea Jul 17 '17 at 14:01

score 0 · Answer 3 · answered Jul 17 '17 at 10:28

You can try DOMNodeInserted,

$(document).bind('DOMNodeInserted', function(event) {
 var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
 var lastchild = element[element.length - 1]; // get the last one (others are hidden)
 if(lastchild != null){
    lastchild.style.visibility = 'hidden'; // set visibility to hidden
 }
});

Working demo

Hope helps,

detecting and hiding dynamically creating div after a specific seconds (not onclick)

3 Answers3