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:
<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>
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./cool-notification-messages-with-css3-jquery#ment-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>
- 2 You mustn't have more than one body element. – jantimon Commented Mar 4, 2013 at 16:10
- removed the 2nd body :) – Santosh Pillai Commented Mar 4, 2013 at 16:12
- From the code i can understand you must show messages for info, error, log or warn.So when you load a page, what will be the default type of message you intend to display. – Aravind Commented Mar 4, 2013 at 16:17
-
Why is your jquery called
jquery-latest.min.js, doesn't make much sense since it won't automatically update? – user2019515 Commented Mar 4, 2013 at 16:21
4 Answers
Reset to default 2To 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).
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');
Yes, use:
window.onload = function( ){
SomeJavaScriptCode
};
And place that in the <head> of the document inside <script> tags.
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/MC7Fu/
Additional notes: please don't use inline event handlers like <body onload="someFunc()">. Use the one Husman remended.
window.onload = function( ){
SomeJavaScriptCode
};