title: run javascript on page load
body: <p>I am using a bit of code to display notification message.
  The code below shows the message on button click.
  Is there any way to show message on page load, I intend to use "type" as a variable to choose between the messages.</p>
  
  <p>any help on this will be appreciated. Thanks</p>
  
  <p>Full code can be found at:</p>
  
  <p><a href="http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574" rel="nofollow">http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574</a></p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Cool notification messages with CSS3 &amp; Jquery demo - Redteamdesign&lt;/title&gt;
  &lt;script src="../js/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="../css/bar.css"&gt;
  &lt;script&gt;
  var myMessages = ['info','warning','error','success']; // define the messages types      
  function hideAllMessages()
  {
       var messagesHeights = new Array(); // this array will store height for         each
       for (i=0; i&lt;myMessages.length; i++)
       {
                messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
                $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport     
       }
  }
  function showMessage(type)
  {
  
  $('.'+ type +'-trigger').click(function(){
        hideAllMessages();                  
        $('.'+type).animate({top:"0"}, 500);
  });
  }
  $(document).ready(function(){
       // Initially, hide them all
       hideAllMessages();
       // Show message
       for(var i=0;i&lt;myMessages.length;i++)
       {
          showMessage(myMessages[i]);
       }
       // When message is clicked, hide it
       $('.message').click(function(){              
                $(this).animate({top: -$(this).outerHeight()}, 500);
        });
        setTimeout(function(){hideAllMessages()},4000);        
  });      
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="info message"&gt;
       &lt;h3&gt;FYI, something just happened!&lt;/h3&gt;
       &lt;p&gt;This is just an info notification message.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="error message"&gt;
       &lt;h3&gt;Oh No!, an error ocurred&lt;/h3&gt;
       &lt;p&gt;This is just an error notification message.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="warning message"&gt;
       &lt;h3&gt;Wait, I must warn you!&lt;/h3&gt;
       &lt;p&gt;This is just a warning notification message.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="success message"&gt;
       &lt;h3&gt;Congrats, you did it!&lt;/h3&gt;
       &lt;p&gt;This is just a success notification message.&lt;/p&gt;
  &lt;/div&gt;
  &lt;ul id="trigger-list"&gt;
       &lt;li&gt;&lt;a href="#" class="trigger info-trigger"&gt;Info&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#" class="trigger error-trigger"&gt;Error&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#" class="trigger warning-trigger"&gt;Warning&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#" class="trigger success-trigger"&gt;Success&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  </code></pre>