Question

I found this script for warning message here: http://www.red-team-design.com/cool-notification-messages-with-css3-jquery

In the script it is set to hide the warning message after the click function

     $('.message').click(function(){              
              $(this).animate({top: -$(this).outerHeight()}, 500);
     });  

So I added Timeout function in the hopes of closing it after x ms, but the ‘timer’ so to speak starts running as soon as the page is loaded.

    setTimeout(function(){hideAllMessages()},5000);  

I want the timeout function to work every time the form is submitted and the drop message becomes visible (I am using a hidden iframe to submit the form and it is for stock, so repeated submits will be done on the same page).

I set up a Demo Here jsfiddle

Answer 1

You want to add it in your showMessage function like this:

function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          setTimeout(hideAllMessages,3000);     
    });
}

jsFiddle Demo

EDIT: As suggested by James Montagne in the comments, you can use clearTimeout() to prevent stocking timeouts if the user clicks around quickly.

Something like this (quick example, might not be production-ready):

var timeout = null;
function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(hideAllMessages,3000);     
    });
}

jsFiddle Demo