Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS][AJAX]NOwe okno z shoutbox
Ziom73
post
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 1
Dołączył: 8.04.2009
Skąd: Polanica Zdrój | Poznań | Wrocław

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

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ę!

Ten post edytował Ziom73 6.08.2009, 10:17:22
Go to the top of the page
+Quote Post
jarrod
post
Post #2





Grupa: Zarejestrowani
Postów: 312
Pomógł: 9
Dołączył: 14.10.2006
Skąd: warszawa

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

no to pomagam w marzeniach:
modal dialogs
top 8 modal dialogs javascript
Go to the top of the page
+Quote Post
Ziom73
post
Post #3





Grupa: Zarejestrowani
Postów: 140
Pomógł: 1
Dołączył: 8.04.2009
Skąd: Polanica Zdrój | Poznań | Wrocław

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

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



ps. do index.php dodałem
Kod
<?php
session_start();
$token = md5(uniqid(rand(), true));
$_SESSION['token'] = $token;
?>
Go to the top of the page
+Quote Post
jarrod
post
Post #4





Grupa: Zarejestrowani
Postów: 312
Pomógł: 9
Dołączył: 14.10.2006
Skąd: warszawa

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

1. wywalasz wywołanie funkcji attachOpacityCSS();

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


3. aby działał na click a nie 2xclick to tam gdzie tworzony jest event zmieniasz"dblclick" na "click"
Go to the top of the page
+Quote Post
Ziom73
post
Post #5





Grupa: Zarejestrowani
Postów: 140
Pomógł: 1
Dołączył: 8.04.2009
Skąd: Polanica Zdrój | Poznań | Wrocław

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

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:
[PHP] pobierz, plaintext 
  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. ?>
[PHP] pobierz, plaintext


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>

Ten post edytował Ziom73 7.08.2009, 12:45:54
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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