Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

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


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
 
 Start new topic
Odpowiedzi
rad11
post
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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

Tam gdzie pobierasz dane , sprawdz czy jest to nowa wiadomosc jezeli jest to uruchom:

[PHP] pobierz, plaintext 
  1. $('audio').attr('autoplay', 'true')
[PHP] pobierz, plaintext


a w strukturze html gdzie usmiesc:

[HTML] pobierz, plaintext 
  1. <audio controls style="display:none;">
  2.   <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  3.   <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  4. </audio>
[HTML] pobierz, plaintext


Ten post edytował rad11 4.02.2015, 15:02:28
Go to the top of the page
+Quote Post
maciek9669
post
Post #3





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

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

Cytat(rad11 @ 4.02.2015, 14:53:18 ) *
Tam gdzie pobierasz dane , sprawdz czy jest to nowa wiadomosc jezeli jest to uruchom:

[PHP] pobierz, plaintext 
  1. $('audio').attr('autoplay', 'true')
[PHP] pobierz, plaintext

A mogłbyś wyjaśnic gdzie dokładnie bo sczerze mówiąc umiem dopiero podstawy podstaw JS. To był gotowy czat skonfigurowałem go pod siebie go pod siebie został mi tylko ten dźwięk...

Ten post edytował maciek9669 4.02.2015, 17:00:42
Go to the top of the page
+Quote Post

Posty w temacie
- maciek9669   Dodanie powidomienia dźwiękowego w daddy-shoutbox   4.02.2015, 10:55:20
- - rad11   Tam gdzie pobierasz dane , sprawdz czy jest to now...   4.02.2015, 14:53:18
|- - maciek9669   Cytat(rad11 @ 4.02.2015, 14:53:18 ) T...   4.02.2015, 16:56:51
- - rad11   pokaz kod files+"daddy-shoutbox.php?action=vi...   4.02.2015, 20:10:05
- - maciek9669   Trochę kombinowałem. Wstawiłem to co kazałeś do in...   4.02.2015, 23:27:37

« Następny starszy · JavaScript · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 12:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn