CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Santosh Pillai
Santosh Pillai

Reputation: 1391

run javascript on page load

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.

any help on this will be appreciated. Thanks

Full code can be found at:

http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574

<head>
<title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title>
<script src="../js/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bar.css">
<script>
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<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<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);        
});      
</script>
</head>
<body>
<div class="info message">
     <h3>FYI, something just happened!</h3>
     <p>This is just an info notification message.</p>
</div>
<div class="error message">
     <h3>Oh No!, an error ocurred</h3>
     <p>This is just an error notification message.</p>
</div>
<div class="warning message">
     <h3>Wait, I must warn you!</h3>
     <p>This is just a warning notification message.</p>
</div>
<div class="success message">
     <h3>Congrats, you did it!</h3>
     <p>This is just a success notification message.</p>
</div>
<ul id="trigger-list">
     <li><a href="#" class="trigger info-trigger">Info</a></li>
     <li><a href="#" class="trigger error-trigger">Error</a></li>
     <li><a href="#" class="trigger warning-trigger">Warning</a></li>
     <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>


</body>

Upvotes: 0

Views: 5720

Answers (4)

sudee
sudee

Reputation: 783

The problem is that the showMessage() function is not actually showing the message, instead it just creates an event handler for elements that have the corresponding class (like .info-trigger). I modified that part of the code, now works like a charm. :)

Working fiddle: http://jsfiddle.net/MC7Fu/

Additional notes: please don't use inline event handlers like <body onload="someFunc()">. Use the one Husman recommended.

window.onload = function( ){
 SomeJavaScriptCode
};

Upvotes: 0

Clafou
Clafou

Reputation: 15400

To achieve your specific requirement (show a message immediately without waiting for a button press) you could add this at the end of the ready function (just after setTimeout(function(){hideAllMessages()},4000);)

var type="warning";
$('.'+type).animate({top:"0"}, 500);

You can replace "warning" with "info", "error" or "success" (or whatever else you wish to add).

Upvotes: 2

Husman
Husman

Reputation: 6909

Yes, use:

window.onload = function( ){
 SomeJavaScriptCode
};

And place that in the <head> of the document inside <script> tags.

Upvotes: 2

Alan Shortis
Alan Shortis

Reputation: 1109

You cannot have more than one body tag. Get rid of the opening body tag at the bottom of your page.

You can call a function when the body loads like this:

<body onload="someFunction();">

Or just call the function from inside your $(document).ready()

someFunction();

You can also use trigger to emulate a click (or whatever) on an element:

$('.message').trigger('click');

Upvotes: 2

Related Questions