Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP][JavaScript]Podmiana emotikon
Forum PHP.pl > Forum > Przedszkole
Maxie
8.07.2012, 15:30:29
Znalazłem stronę z darmowym kodem do podmiany emotikon na obrazki tych emotikon: http://users.dcc.uchile.cl/~skreft/emoticon/?
Przerobiłem tak by móc z tego kodu korzystać. Na przykładzie w html, podmieniłem ten kod i działał. Przykład wygląda następująco:
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>JQuery emoticon plugin</title>
  4.         <script type="text/javascript" src="jq.js"></script>
  5.                 <script type="text/javascript" src="jquery.emoticons.js"></script>
  6.         <script type="text/javascript">
  7. $(document).ready(function(){
  8.     $(".posted").emoticons();
  9. });
  10.         </script>
  11.         <style type="text/css" media=screen>
  12. <!--
  13. .emoticonimg{
  14. /*border: 1px solid #000000;*/
  15. vertical-align:bottom;
  16. }
  17. -->
  18. </style>
  19. </head>
  20.     <body>
  21.         <h1>Usage</h1>
  22.         <p class="posted">To replace the text of emoticons just make the container of class="posted". Pretty easy, right? :)<p> 
  23.         <h1>Download</h1>
  24.         A zip file containing all files can be downloaded from <a href="emoticon.zip">here<a/>.
  25.         <h1>Examples</h1>
  26.         <h2 class="posted">Hi there!;)</h2>
  27.         <div class="posted">
  28.             I think you are a (M). This content is inside a div.
  29.         </div>
  30.         <p>Here are all the emoticons and ways of writing them:<br /> 
  31.             :-) :) =] =) :-( =( :[ :< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br />
  32.             They can even be together, no need of whitespaces inbetween: :)(M)
  33.         </p>
  34.         <p class="posted">Here are all the emoticons and ways of writing them:<br /> 
  35.             :-) :) =] =) :-( =( :[ :< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br />
  36.             They can even be together, no need of whitespaces inbetween: :)(M)
  37.         </p>
  38.         <ol class="posted">
  39.             <li>Bla :)</li>
  40.             <li>Bla(6) :D</li>
  41.         </ol>
  42.         <form>
  43.             <button type="button" class="posted">Submit (M)=O</button> <br />
  44.             The following button is an input of type submit, which does not hold any html inside, so even if we says it is of class posted, we are not doing any harm.
  45.             <input type="submit" value="Hi:)" class="posted" />
  46.         </form>
  47.         <h1>Known Bugs</h1>
  48.         Bug B0001 is caused due to the simple(naive) replacement method.
  49.         There should be a traversal of the DOM or a regular expression replacement in order to get better results, but that would be rather slow.
  50.         See the source code to understand the problem.
  51.         <ul>
  52.             <li>B0001: Emoticons in text only elements(image alternate text, input button, etc), will be replaced by an ugly html code</li>
  53.             <p class="posted">This is a text with emoticons :), and an image with alterenate text inside <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="No image ;)" />. The end.</p>
  54.         </ul>
  55.     </body>
  56. </html>
[HTML] pobierz, plaintext


Po czym dodałem do swojej strony kod. I o dziwo nie działa. A oto on:
[PHP] pobierz, plaintext 
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <head>
  3. <script type="text/javascript" src="jq.js"></script>
  4. <script type="text/javascript" src="jquery.emoticons.js"></script>
  5. <script src="js/chat_limit.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8.     $(".posted").emoticons();
  9. });
  10.         </script>
  11.  
  12. </head>
  13.  
  14. <div style="height: 100%; width: 100%; background-color: #fff"><iframe name="ramka" style="height: 90%" id="NEWSY" src="chat_include.php"></iframe>
  15. <form name="formularz" action="chat_send.php" method="post">
  16. <input onkeyup="SignLimit(this,250);" id="tresc" type="textarea" class="text" name="tresc" style="width: 98.5%" placeholder="Treść postu...">
  17.  
  18. <p class="center" style="margin-left: 10px"><table border="0" bordercolor="" style="background-color:" width="98.5%" cellpadding="0" cellspacing="0" style="margin-left: 10px;">
  19. 	<tr>
  20. 		<td align="left">
  21. 		<a onclick="document.getElementById('tresc').value+='^^'">
  22. 		<img src="emotes/^^.gif" style="border:0px;" />
  23. 		</a>
  24. 		<a onclick="document.getElementById('tresc').value+=':('">
  25. 		<img src="emotes/=(.gif" style="border:0px;" />
  26. 		</a>
  27. 		<a onclick="document.getElementById('tresc').value+=':)'">
  28. 		<img src="emotes/=).gif" style="border:0px;" />
  29. 		</a>
  30. 		<a onclick="document.getElementById('tresc').value+=':D'">
  31. 		<img src="emotes/=D.gif" style="border:0px;" />
  32. 		</a>
  33. 		<a onclick="document.getElementById('tresc').value+=':P'">
  34. 		<img src="emotes/=P.gif" style="border:0px;" />
  35. 		</a>
  36. 		<a onclick="document.getElementById('tresc').value+=':]'">
  37. 		<img src="emotes/evil_smile.gif" style="border:0px;" />
  38. 		</a>
  39. 		<a onclick="document.getElementById('tresc').value+=':>'">
  40. 		<img src="emotes/have_a_nice_day.gif" style="border:0px;" />
  41. 		</a>
  42. 		<a onclick="document.getElementById('tresc').value+='o.o'">
  43. 		<img src="emotes/O.o.gif" style="border:0px;" />
  44. 		</a>
  45. 		<a onclick="document.getElementById('tresc').value+=':O'">
  46. 		<img src="emotes/oh_noes.gif" style="border:0px;" />
  47. 		</a>
  48. 		<a onclick="document.getElementById('tresc').value+=':{'">
  49. 		<img src="emotes/owie.gif" style="border:0px;" />
  50. 		</a>
  51. 		<a onclick="document.getElementById('tresc').value+=':/'">
  52. 		<img src="emotes/serious.gif" style="border:0px;" />
  53. 		</a>
  54. 		<a onclick="document.getElementById('tresc').value+=':c'">
  55. 		<img src="emotes/shame.gif" style="border:0px;" />
  56. 		</a>
  57. 		<a onclick="document.getElementById('tresc').value+='T.T'">
  58. 		<img src="emotes/T.T.gif" style="border:0px;" />
  59. 		</a>
  60. 		<a onclick="document.getElementById('tresc').value+='WTF'">
  61. 		<img src="emotes/WTF.gif" style="border:0px;" />
  62. 		</a>
  63. 		<a onclick="document.getElementById('tresc').value+='xD'">
  64. 		<img src="emotes/XD.gif" style="border:0px;" />
  65. 		</a>
  66. 		</td>
  67. 		<td align="right"><span><form><input class="posted" type="checkbox" value="refresh" id="refresh"></form> <p class="posted">XD</p></span>&nbsp;&nbsp;<span id="counter">0/250</span>&nbsp;&nbsp;<button class="button default">Wyślij</button></td>
  68. 	</tr>
  69. </table></p>
  70. </form>
  71. </div>
  72.  
  73. <script language="java_script" type="text/java_script">
  74. <!--
  75. function licz() {
  76. document.form.text.value = document.form.poletekstowe.value.length
  77.  
  78. }
  79. //-->
  80. </script>
[PHP] pobierz, plaintext


I co ja robię nie ta, że u mnie nie działa, na na przykładzie i owszem?
konrados
8.07.2012, 17:59:36
A włącz konsolę (F12->console w chrome) i zobacz czy tam nie wypluwa jakichś błędów.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.