Test
From Dxx
Line 9: | Line 9: | ||
<plain_html> | <plain_html> | ||
- | < | + | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
- | + | <html> | |
- | + | <head> | |
- | // | + | <base href="http://www.ajaxdaddy.com/ajax/jquery/shoutbox/"> |
- | + | <style type="text/css"> | |
- | + | body {color: white;background: #52616F;} | |
- | + | a { color: white; } | |
+ | </style> | ||
+ | |||
+ | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | ||
+ | <title>jQuery</title> | ||
+ | <style type="text/css"> | ||
+ | #daddy-shoutbox { | ||
+ | padding: 5px; | ||
+ | background: #3E5468; | ||
+ | color: white; | ||
+ | width: 600px; | ||
+ | font-family: Arial,Helvetica,sans-serif; | ||
+ | font-size: 11px; | ||
} | } | ||
- | + | .shoutbox-list { | |
- | + | border-bottom: 1px solid #627C98; | |
- | + | ||
- | < | + | padding: 5px; |
- | < | + | display: none; |
- | < | + | } |
- | < | + | #daddy-shoutbox-list { |
- | + | text-align: left; | |
- | + | margin: 0px auto; | |
- | < | + | } |
- | + | #daddy-shoutbox-form { | |
- | < | + | text-align: left; |
- | + | ||
- | < | + | } |
- | </ | + | .shoutbox-list-time { |
+ | color: #8DA2B4; | ||
+ | } | ||
+ | .shoutbox-list-nick { | ||
+ | margin-left: 5px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | .shoutbox-list-message { | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <script type="text/javascript" src="javascript/jquery.js"></script> | ||
+ | <script type="text/javascript" src="javascript/jquery.form.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <center> | ||
+ | <div id="daddy-shoutbox"> | ||
+ | <div id="daddy-shoutbox-list"></div> | ||
+ | <br /> | ||
+ | <form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post"> | ||
+ | Nick: <input type="text" name="nickname" /> Say: <input type="text" name="message" /> | ||
+ | <input type="submit" value="Submit" /> | ||
+ | <span id="daddy-shoutbox-response"></span> | ||
+ | </form> | ||
+ | </div> | ||
+ | </center> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | var count = 0; | ||
+ | var files = ''; | ||
+ | var lastTime = 0; | ||
+ | |||
+ | function prepare(response) { | ||
+ | var d = new Date(); | ||
+ | count++; | ||
+ | d.setTime(response.time*1000); | ||
+ | var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); | ||
+ | var string = '<div class="shoutbox-list" id="list-'+count+'">' | ||
+ | + '<span class="shoutbox-list-time">'+mytime+'</span>' | ||
+ | + '<span class="shoutbox-list-nick">'+response.nickname+':</span>' | ||
+ | + '<span class="shoutbox-list-message">'+response.message+'</span>' | ||
+ | +'</div>'; | ||
+ | |||
+ | return string; | ||
+ | } | ||
+ | |||
+ | function success(response, status) { | ||
+ | if(status == 'success') { | ||
+ | lastTime = response.time; | ||
+ | $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />'); | ||
+ | $('#daddy-shoutbox-list').append(prepare(response)); | ||
+ | $('input[@name=message]').attr('value', '').focus(); | ||
+ | $('#list-'+count).fadeIn('slow'); | ||
+ | timeoutID = setTimeout(refresh, 3000); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function validate(formData, jqForm, options) { | ||
+ | for (var i=0; i < formData.length; i++) { | ||
+ | if (!formData[i].value) { | ||
+ | alert('Please fill in all the fields'); | ||
+ | $('input[@name='+formData[i].name+']').css('background', 'red'); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | $('#daddy-shoutbox-response').html('<img src="'+files+'images/loader.gif" />'); | ||
+ | clearTimeout(timeoutID); | ||
+ | } | ||
+ | |||
+ | function refresh() { | ||
+ | $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) { | ||
+ | if(json.length) { | ||
+ | for(i=0; i < json.length; i++) { | ||
+ | $('#daddy-shoutbox-list').append(prepare(json[i])); | ||
+ | $('#list-' + count).fadeIn('slow'); | ||
+ | } | ||
+ | var j = i-1; | ||
+ | lastTime = json[j].time; | ||
+ | } | ||
+ | //alert(lastTime); | ||
+ | }); | ||
+ | timeoutID = setTimeout(refresh, 3000); | ||
+ | } | ||
+ | |||
+ | // wait for the DOM to be loaded | ||
+ | $(document).ready(function() { | ||
+ | var options = { | ||
+ | dataType: 'json', | ||
+ | beforeSubmit: validate, | ||
+ | success: success | ||
+ | }; | ||
+ | $('#daddy-shoutbox-form').ajaxForm(options); | ||
+ | timeoutID = setTimeout(refresh, 100); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
</plain_html> | </plain_html> |
Revision as of 17:05, 5 January 2009
<plain_html>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/kTV1CcS53JQ"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/kTV1CcS53JQ" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
</plain_html>
<plain_html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/jquery/shoutbox/">
<style type="text/css">
body {color: white;background: #52616F;}
a { color: white; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>jQuery</title> <style type="text/css">
- daddy-shoutbox {
padding: 5px; background: #3E5468; color: white; width: 600px; font-family: Arial,Helvetica,sans-serif; font-size: 11px; } .shoutbox-list { border-bottom: 1px solid #627C98;
padding: 5px; display: none; }
- daddy-shoutbox-list {
text-align: left; margin: 0px auto; }
- daddy-shoutbox-form {
text-align: left;
} .shoutbox-list-time { color: #8DA2B4; } .shoutbox-list-nick { margin-left: 5px; font-weight: bold; } .shoutbox-list-message { margin-left: 5px; }
</style> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/jquery.form.js"></script> </head> <body>
<form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post">
Nick: <input type="text" name="nickname" /> Say: <input type="text" name="message" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript"> var count = 0; var files = ; var lastTime = 0;
function prepare(response) { var d = new Date(); count++; d.setTime(response.time*1000); var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
var string = '+ ''+mytime+'' + ''+response.nickname+':' + ' '
+'return string; }
function success(response, status) { if(status == 'success') { lastTime = response.time; $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />'); $('#daddy-shoutbox-list').append(prepare(response)); $('input[@name=message]').attr('value', ).focus(); $('#list-'+count).fadeIn('slow'); timeoutID = setTimeout(refresh, 3000); } }
function validate(formData, jqForm, options) { for (var i=0; i < formData.length; i++) { if (!formData[i].value) { alert('Please fill in all the fields'); $('input[@name='+formData[i].name+']').css('background', 'red'); return false; } } $('#daddy-shoutbox-response').html('<img src="'+files+'images/loader.gif" />'); clearTimeout(timeoutID); }
function refresh() { $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) { if(json.length) { for(i=0; i < json.length; i++) { $('#daddy-shoutbox-list').append(prepare(json[i])); $('#list-' + count).fadeIn('slow'); } var j = i-1; lastTime = json[j].time; } //alert(lastTime); }); timeoutID = setTimeout(refresh, 3000); }
// wait for the DOM to be loaded $(document).ready(function() { var options = { dataType: 'json', beforeSubmit: validate, success: success }; $('#daddy-shoutbox-form').ajaxForm(options); timeoutID = setTimeout(refresh, 100); }); </script> </body> </html> </plain_html>