Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dodanie powidomienia dźwiękowego w daddy-shoutbox
maciek9669
post 4.02.2015, 10:55:20
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 3.02.2015

Ostrzeżenie: (0%)
-----


Nw czy to dobre miejsce do zadania tego pytania
Chciałbym dodać do shoutboxa opartego na daddy-shoutbox dodać dzwięk po nadejściu nowej widomości lub przynajmniej po odświeżeniu pola z wiadomościami ale nie mam pojęcia jak js dopiero się uczę
bazuje na kilku plikach

index
  1. <!DOCTYPE html>
  2.  
  3. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  4.  
  5. <style type="text/css">
  6. body {
  7. background: url('http://tag.16mb.com/bg.jpg') repeat fixed;
  8. font-size: 18px;
  9. font-family: Arial,Helvetica,sans-serif;
  10. }
  11. #daddy-shoutbox {
  12. padding: 5px;
  13. background: url('http://tag.16mb.com/bgs.jpg') repeat fixed;
  14. color: white;
  15. width: 500px;
  16. font-family: Arial,Helvetica,sans-serif;
  17. font-size: 11px;
  18. }
  19. #tab {
  20. font-size: 14px;
  21. }
  22. .shoutbox-list {
  23. border-bottom: 1px solid #083030;
  24.  
  25. padding: 5px;
  26. display: none;
  27. }
  28. #daddy-shoutbox-list {
  29. text-align: left;
  30. margin: 0px auto;
  31. }
  32. #daddy-shoutbox-form {
  33. text-align: left;
  34.  
  35. }
  36. .shoutbox-list-time {
  37. color: #8DA2B4;
  38. }
  39. .shoutbox-list-nick {
  40. margin-left: 15px;
  41. font-weight: bold;
  42. }
  43. .shoutbox-list-message {
  44. margin-left: 15px;
  45. }
  46. </style>
  47. <title>Czat</title>
  48. <script type="text/javascript" src="Czat_pliki/jquery.js"></script>
  49. <script type="text/javascript" src="Czat_pliki/jquery_002.js"></script>
  50. </head>
  51. <body alink="white" link="white" vlink="white">
  52. <div id="tab">
  53. <table align="center" border="0" cellspacing="1" height="25" width="512">
  54. <tbody><tr>
  55. <td align="center" background="Czat_pliki/bgs.jpg">
  56. <a href="http://tag.16mb.com/" style="text-decoration: none;">ZWZST</a>
  57. </td>
  58. <td align="center" background="Czat_pliki/bgs.jpg">
  59. <a href="http://tag.16mb.com/2/" style="text-decoration: none;">Kanał 2</a>
  60. </td>
  61. <td align="center" background="Czat_pliki/bgs.jpg">
  62. <a href="http://tag.16mb.com/3/" style="text-decoration: none;">Kanał 3</a>
  63. </td>
  64. <td align="center" background="Czat_pliki/bgs.jpg">
  65. <a href="http://tag.16mb.com/4/" style="text-decoration: none;">Kanał 4</a>
  66. </td>
  67. </tr>
  68. </tbody></table>
  69. </div>
  70. <div id="daddy-shoutbox">
  71. <div id="daddy-shoutbox-list"></div>
  72. <br>
  73. <center><form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post">
  74. <br>
  75. Tekst: <input name="message" style="white-space:pre-wrap; margin-left: 20px; width:400px">
  76. <br>
  77. <br>
  78. Nick: <input name="nickname" style="margin-left: 25px;" type="text">
  79. <input value="Wyslij" type="submit">
  80. <span id="daddy-shoutbox-response"></span>
  81. </form>
  82. <div id="clear-button" style="text-align: right;">
  83. <form style="align: right;" action="clear.php"><input value="Clear" type="submit"></form></div></center>
  84. </div>
  85.  
  86. </center>
  87.  
  88. <script type="text/javascript">
  89. var count = 0;
  90. var files = '';
  91. var lastTime = 0;
  92.  
  93. function prepare(response) {
  94. var d = new Date();
  95. count++;
  96. d.setTime(response.time*1000);
  97. var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
  98. var string = '<div class="shoutbox-list" id="list-'+count+'">'
  99. + '<span class="shoutbox-list-time">'+mytime+'</span>'
  100. + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
  101. + '<span class="shoutbox-list-message">'+response.message+'</span>'
  102. +'</div>';
  103.  
  104. return string;
  105. }
  106.  
  107. function success(response, status) {
  108. if(status == 'success') {
  109. lastTime = response.time;
  110. $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />');
  111. $('#daddy-shoutbox-list').append(prepare(response));
  112. $('input[@name=message]').attr('value', '').focus();
  113. $('#list-'+count).fadeIn('slow');
  114. timeoutID = setTimeout(refresh, 3000);
  115. }
  116. }
  117.  
  118. function validate(formData, jqForm, options) {
  119. for (var i=0; i < formData.length; i++) {
  120. if (!formData[i].value) {
  121. alert('Uzupełnij wszystkie pola!');
  122. $('input[@name='+formData[i].name+']').css('background', 'red');
  123. return false;
  124. }
  125. }
  126. $('#daddy-shoutbox-response').html('<img src="http://tag.16mb.com/loader.gif" />');
  127. clearTimeout(timeoutID);
  128. }
  129.  
  130. function refresh() {
  131.  
  132. $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
  133. if(json.length) {
  134. for(i=0; i < json.length; i++) {
  135. $('#daddy-shoutbox-list').append(prepare(json[i]));
  136. $('#list-' + count).fadeIn('slow');
  137. }
  138. var j = i-1;
  139. lastTime = json[j].time;
  140. }
  141. //alert(lastTime);
  142. });
  143. timeoutID = setTimeout(refresh, 3000);
  144. }
  145.  
  146. // wait for the DOM to be loaded
  147. $(document).ready(function() {
  148. var options = {
  149. dataType: 'json',
  150. beforeSubmit: validate,
  151. success: success
  152. };
  153. $('#daddy-shoutbox-form').ajaxForm(options);
  154. timeoutID = setTimeout(refresh, 100);
  155. });
  156. </script>
  157. <center><a style="text-decoration: none; color: black;"><font color="#083030" size="10">IP: <script language="JavaScript" type="text/javascript" src="Czat_pliki/adres_ip.htm"></script>91.206.211.201</font></a></center>
  158.  
  159. </body></html>


link do czatu Czat
link do plików użytych w Shutbox pliki

Ten post edytował maciek9669 4.02.2015, 11:09:49
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 10:05