Home > JavaScript > Okienko czatu z dźwięki

Okienko czatu z dźwięki

Dodane przez: piciu
opis:
Okienko czatu z dźwiękiem Facebooka
Kod:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(function(){
  5. $("#chatData").focus();
  6. $('<audio id="chatAudio"><source src="widget.ogg" type="audio/ogg"><source src="https://dl.dropboxusercontent.com/u/63968842/notify.mp3" type="audio/mpeg"><source src="widget.wav" type="audio/wav"></audio>').appendTo('body');
  7.  
  8. $("#trig").on("click",function(){
  9. var a = $("#chatData").val().trim();
  10. if(a.length > 0)
  11. {
  12. $("#chatData").val('');
  13. $("#chatData").focus();
  14. $("<li></li>").html('<img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/64/Misc-User-icon.png"/><span>'+a+'</span>').appendTo("#chatMessages");
  15. // Scrolling Adjustment
  16. $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
  17. $('#chatAudio')[0].play();
  18. }
  19. });
  20. });
  21. </script>
  22.  
  23. <style>
  24. body{font-family:arial;font-size:13px}
  25. #chatBox
  26. {
  27. width:400px;
  28. border:1px solid #000;
  29. margin:5px;
  30. }
  31. #chat
  32. {
  33. max-height:220px;
  34. overflow-y:auto;
  35. max-width:400px;
  36. }
  37. #chat > ul > li
  38. {
  39. padding:3px;
  40. clear:both;
  41. padding:4px;
  42. margin:10px 0px 5px 0px;
  43. overflow:auto
  44. }
  45. #chatMessages
  46. {
  47. list-style:none
  48. }
  49. #chatMessages > li > img{
  50. width:35px;float:left
  51. }
  52. #chatMessages > li > span
  53. {
  54. width:300px;
  55. float:left;
  56. margin-left:5px
  57. }
  58. #chatData
  59. {
  60. padding:5px;
  61. margin:5px;
  62. border-radius:5px;
  63. border:1px solid #999;
  64. width:300px
  65. }
  66. #trig
  67. {
  68. padding: 4px;
  69. border: solid 1px #333;
  70. background-color: #133783;
  71. color:#fff;
  72. font-weight:bold
  73. }
  74. </style>
  75.  
  76. <h2>Shoutbox</h2>
  77.  
  78. <div id='chatBox' >
  79.  
  80. <div id='chat'>
  81. <ul id='chatMessages'>
  82.  
  83. <li>
  84. <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/64/Misc-User-icon.png"/><span>www.dodatkidostron.xaa.pl</span>
  85. </li>
  86. <li>
  87.  
  88. </li>
  89.  
  90. </ul>
  91. </div>
  92. <input type="text" id="chatData" placeholder="Wpisz wiadomość" />
  93. <input type="button" value=" Wyślij " id="trig" />
  94. </div>
  95. <font size="1">

©