Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS][AJAX]NOwe okno z shoutbox
Forum PHP.pl > Forum > Przedszkole
Ziom73
Chciałbym zrobić, aby po kliknięciu w link "Shoutbox" Wyszło okienko (najlepiej w ajax), które można dowolnie przenieść na po stronie, i żeby była domyślna pozycja po prawej, oraz, żeby można było zamknąć okienko ;-)

Tak to sobie wymarzyłem ;]

Za pomoc w zrobieniu, lub danie gotowca Z góry baaardzo dziękuję!
jarrod
no to pomagam w marzeniach:
modal dialogs
top 8 modal dialogs javascript
Ziom73
Wybrałem to: http://www.codeproject.com/KB/aspnet/Modal...ialogV2_src.zip
(Oczywiście styl przerobię trochę;])

1. Jak zrobić aby tło się nie robiło ciemniejsze?
2. Jak zrobić, żeby kliknąć w link i wtedy wyjdzie okienko?
3. Nie działa Shoutbox ;/ Zobacz! (trzeba 2 razy kliknąć w tekst)

mój plik externalScript.php to:
  1. <?php
  2. $token = md5(uniqid(rand(), true));
  3. $_SESSION['token'] = $token;
  4. ?>
  5. <!-- 1. Important: the PHP code above must appear at the top of any page which includes the shoutbox (before any HTML is started). -->
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8.  
  9. <!-- Copy the code between "Start Meta and links" and "End Meta and links",
  10. paste it before the </head> closing tag on every page which includes the shoutbox
  11. -->
  12.  
  13. <!-- 2. Start Meta and links -->
  14. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  15. <style type="text/css">
  16. /* for Mozilla only: create rounded corners */
  17. #box {
  18. -moz-border-radius: 10px 10px 10px 10px;
  19. }
  20. </style>
  21. <link rel="stylesheet" type="text/css" href="wtag/css/main-style.css" />
  22. <!--[if IE]>
  23. <link rel="stylesheet" type="text/css" href="wtag/css/ie-style.css" />
  24. <![endif]-->
  25. <script type="text/javascript" src="wtag/js/dom-drag.js"></script>
  26. <script type="text/javascript" src="wtag/js/scroll.js"></script>
  27. <script type="text/javascript" src="wtag/js/conf.js"></script>
  28. <script type="text/javascript" src="wtag/js/ajax.js"></script>
  29. <script type="text/javascript" src="wtag/js/drop_down.js"></script>
  30. <!-- 2. End Meta and links -->
  31. <!--
  32. Copyright &copy; 2008 Pippa <a href=\"http://www.spacegirlpippa.co.uk\" target=\"_blank\">http://www.spacegirlpippa.co.uk</a>
  33. Contact: sthlm.pippa@gmail.com
  34. Released: 30.05.2008 Stockholm, Sweden
  35.  
  36. This file is part of wTag mini chat - shoutbox.
  37.  
  38. wTag is free software: you can redistribute it and/or modify
  39. it under the terms of the GNU General Public License as published by
  40. the Free Software Foundation, either version 3 of the License, or
  41. (at your option) any later version.
  42.  
  43. wTag is distributed in the hope that it will be useful,
  44. but WITHOUT ANY WARRANTY; without even the implied warranty of
  45. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  46. GNU General Public License for more details.
  47.  
  48. You should have received a copy of the GNU General Public License
  49. along with wTag.  If not, see <http://www.gnu.org/licenses/>.
  50. -->
  51.  
  52. <div id="main">
  53.  
  54. <div id="corner_tl">
  55. </div>
  56. <div id="corner_tr">
  57. </div>
  58. <div id="corner_bl">
  59. </div>
  60. <div id="corner_br">
  61. </div>
  62.  
  63. <!-- 3. Shoutbox code start -->
  64. <div id="box">
  65.  
  66. <div id="chat">
  67.  
  68. <div id="scrollArea">
  69. <div id="scroller">
  70. </div>
  71. </div>
  72.  
  73. <div id="container">
  74. <div id='content'>
  75. </div>
  76. </div>
  77.  
  78. <div id='form'>
  79. <form id='cform' name='chatform' action="#" >
  80. <div id='field_set'>
  81. <input type='hidden' id='token' name='token' value='<?php echo $token; ?>' />
  82. <input type='text' id='name' name='name' value='name' />
  83. <input type='text' id='url' name='url' value='http://' />
  84. <textarea rows='4' cols='10' id='message'  name='message' >message</textarea>
  85. </div>
  86. </form>
  87. </div>
  88.  
  89. <div id="chat_menu">
  90.  
  91. <div id ="wtag">
  92. <p>
  93. <!-- You may not remove the copyright link, but you may edit its look and location on your web page -->
  94. <a href="http://spacegirlpippa.co.uk" title="A free mini chat (shoutbox) script">
  95. wTag
  96. </a>
  97. </p>
  98. </div>
  99.  
  100. <div id='refresh'>
  101. <p>refresh</p>
  102. </div>
  103.  
  104. <div id='emo'>
  105. <ul id="show_sm">
  106. <li>
  107. smileys
  108. <ul id="smiley_box">
  109. <li>
  110. <img class='smileys' src='wtag/smileys/smile.gif' width='15' height='15' alt=':)' title=':)' onclick = "tagSmiley(':)');" />
  111. </li>
  112. <li>
  113. <img class='smileys' src='wtag/smileys/sad.gif' width='15' height='15' alt=':(' title=':(' onclick = "tagSmiley(':(');" />
  114. </li>
  115. <li>
  116. <img class='smileys' src='wtag/smileys/wink.gif' width='15' height='15' alt=';)' title=';)' onclick = "tagSmiley(';)');" />
  117. </li>
  118. <li>
  119. <img class='smileys' src='wtag/smileys/tongue.gif' width='15' height='15' alt=':-P' title=':-P' onclick = "tagSmiley(':-P');"/>
  120. </li>
  121. <li>
  122. <img class='smileys' src='wtag/smileys/rolleyes.gif' width='15' height='15' alt='S-)' title='S-)' onclick = "tagSmiley('S-)');"/>
  123. </li>
  124. <li>
  125. <img class='smileys' src='wtag/smileys/angry.gif' width='15' height='15' alt='>(' title='>(' onclick = "tagSmiley('>(');" />
  126. </li>
  127. <li>
  128. <img class='smileys' src='wtag/smileys/embarassed.gif' width='15' height='15' alt=':*)' title=':*)' onclick = "tagSmiley(':*)');" />
  129. </li>
  130. <li>
  131. <img class='smileys' src='wtag/smileys/grin.gif' width='15' height='15' alt=':-D' title=':-D' onclick = "tagSmiley(':-D');" />
  132. </li>
  133. <li>
  134. <img class='smileys' src='wtag/smileys/cry.gif' width='15' height='15' alt='QQ' title='QQ' onclick = "tagSmiley('QQ');" />
  135. </li>
  136. <li>
  137. <img class='smileys' src='wtag/smileys/shocked.gif' width='15' height='15' alt='=O' title='=O' onclick = "tagSmiley('=O');" />
  138. </li>
  139. <li>
  140. <img class='smileys' src='wtag/smileys/undecided.gif' width='15' height='15' alt='=/' title='=/' onclick = "tagSmiley('=/');" />
  141. </li>
  142. <li>
  143. <img class='smileys' src='wtag/smileys/cool.gif' width='15' height='15' alt='8-)' title='8-)' onclick = "tagSmiley('8-)');" />
  144. </li>
  145. <li>
  146. <img class='smileys' src='wtag/smileys/sealedlips.gif' width='15' height='15' alt=':-X' title=':-X' onclick = "tagSmiley(':-X');" />
  147. </li>
  148. <li>
  149. <img class='smileys' src='wtag/smileys/angel.gif' width='15' height='15' alt='O:]' title='O:]' onclick = "tagSmiley('O:]');" />
  150. </li>
  151. </ul>
  152. </li>
  153.  
  154. </ul>
  155. </div>
  156.  
  157. <div id='submit'>
  158. <p>submit</p>
  159. </div>
  160.  
  161. </div>
  162.  
  163. </div>
  164. </div>
  165. <!-- 3. Shoutbox code end -->
  166.  
  167. </div>



ps. do index.php dodałem
Kod
<?php
session_start();
$token = md5(uniqid(rand(), true));
$_SESSION['token'] = $token;
?>
jarrod
1. wywalasz wywołanie funkcji attachOpacityCSS();

2. jadna z możliwości (najprostsza):
  1. <a href="javascript:openShoutbox();" onclick="return false;">klik</a>


3. aby działał na click a nie 2xclick to tam gdzie tworzony jest event zmieniasz"dblclick" na "click"
Ziom73
Dobra wybrałem sobie inne działające już okienko ;]
Jeszcze dostosowuję shoutbox ;]

Zrobiłem już, ale gryzie się z moim menu, czyli nie ma przesówających się obiektów pod tekstem ;/
menutop:
  1. <?php
  2. <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
  3.    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
  4.    <script type="text/javascript" src="jquery.easing.min.js"></script>
  5.    <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
  6.    <script type="text/javascript">
  7.        $(function() {
  8.            $("#1, #2, #3").lavaLamp({
  9.                fx: "backout",
  10.                speed: 700,
  11.            });
  12.        });
  13.    </script>
  14.    <!--  Prototype Window Class Part -->
  15.    <script type="text/javascript" src="/includes/shoutbox/js/documentation/javascripts/prototype.js"> </script>
  16.      <script type="text/javascript" src="/includes/shoutbox//js/documentation/javascripts/effects.js"> </script>
  17.      <script type="text/javascript" src="/includes/shoutbox/js/documentation/javascripts/window.js"> </script>
  18.      <script type="text/javascript" src="/includes/shoutbox/js/documentation/javascripts/window_effects.js"> </script>
  19.      <script type="text/javascript" src="/includes/shoutbox/js/documentation/javascripts/debug.js"> </script>
  20.      
  21.    <link href="/includes/shoutbox/js/documentation/themes/default.css" rel="stylesheet" type="text/css" >     </link>
  22.      <link href="/includes/shoutbox/js/documentation/themes/spread.css" rel="stylesheet" type="text/css" >     </link>
  23.      <link href="/includes/shoutbox/js/documentation/themes/alert.css" rel="stylesheet" type="text/css" >     </link>
  24.      <link href="/includes/shoutbox/js/documentation/themes/alert_lite.css" rel="stylesheet" type="text/css" >     </link>
  25.      <link href="/includes/shoutbox/js/documentation/themes/alphacube.css" rel="stylesheet" type="text/css" >     </link>
  26.      <link href="/includes/shoutbox/js/documentation/themes/debug.css" rel="stylesheet" type="text/css" >     </link>
  27.  
  28.    <!--  Doc Part-->
  29.          <script type="text/javascript" src="/includes/shoutbox/js/documentation/js/application2.js"> </script>
  30.    <script type="text/javascript">
  31.        $(function() {
  32.            $("#1, #2, #3").lavaLamp({
  33.                fx: "backout",
  34.                speed: 700,
  35.            });
  36.        });
  37.    </script>
  38.  
  39. <ul class="lavaLampWithImage" id="2">
  40.    <li class="current"><a href="#">FAQ</a></li>
  41.    <li><a href="/regulamin.php">Regulamin</a></li>
  42.    <li><a href="#">        <script>Application.addTitle('Open a window with an URL inside', 'open_window2')</script>
  43.                  <div class="listing" style="display:none" id="open_window2_codediv">
  44.          <xmp id="open_window2">
  45. var win = new Window({className: "spread", title: "Shoutbox",
  46.                      top:120, left:10, width:300, height:243,
  47.                      url: "/includes/shoutbox/minichat.php", showEffectOptions: {duration:1.5}})
  48. win.show();                                            
  49.          </xmp>  
  50. </div></a></li>
  51. </ul>
  52. ?>


menu mam takie: <a href="http://forum.php.pl/index.php?showtopic=11...mp;#entry637504" target="_blank">http://forum.php.pl/index.php?showtopic=11...mp;#entry637504</a>

a okienka mam z <a href="http://prototype-window.xilinus.com/downlo...dows_js_1.3.zip" target="_blank">http://prototype-window.xilinus.com/downlo...dows_js_1.3.zip</a>

Zobaczcie efekt <a href="http://site.thawsite.cba.pl/index2.php" target="_blank">http://site.thawsite.cba.pl/index2.php</a>
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.