php - run javascript on page load - Stack Overflow

IT技术

更新时间：2025-04-155

admin管理员组
文章数量:1391960

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>

Share Improve this question edited Mar 4, 2013 at 16:12 asked Mar 4, 2013 at 16:08 Santosh Pillai 1,3911 gold badge21 silver badges31 bronze badges

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

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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).

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
};

本文标签： phprun javascript on page loadStack Overflow

版权声明：本文标题：php - run javascript on page load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744700339a2620526.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

php - run javascript on page load - Stack Overflow

4 Answers 4

更多相关文章