Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [PHP][CSS]Wczytanie pliku do <body>..</body>
-Ciaupciek-
post 7.08.2012, 10:32:59
Post #1





Goście







A więc jak zrobić, aby plik 'rejestracja.php' wczytać w indexie do <body>? Tak, aby nie było trzeba wczytywać, odświeżać całej strony?

Tak o chce.
Jest sobie kod HTML
  1. <div class="newsy">to jest sobie news od razu widoczny po wejsciu na strone</div>
  2. </body>
  3. </html>


Gdzieś na górze jest menu i na nim odnośnik "Rejestracja". Chce, aby po naciśnięciu "Rejestracja" plik "rejestracja.php" wczytywał się do diva "newsy" pomiędzy tagami (czy jak to tam się nazywa) <body></body>.
Po prostu, aby nie odświeżała się cała strona w celu otworzenia pliku "rejestracja.php" tylko sam tag <body></body>.
Go to the top of the page
+Quote Post
pedro84
post 7.08.2012, 10:35:22
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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


AJAXem?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 10:48:14
Post #3





Goście







To Ty się mnie pytasz czy odpowiadasz?
Mógłbym prosić o jakiś kod gotowy, gdyż teraz mam prędkość 32kb/s i dopiero 10 będę miał normalną prędkość 4mb.
play sucks.
Go to the top of the page
+Quote Post
markonix
post 7.08.2012, 10:51:06
Post #4





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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


http://api.jquery.com/load/


--------------------
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 11:43:38
Post #5





Goście







Trochę tego nie rozumiem.
Moje menu wygląda w taki sposób:
  1. <nav id="nawigacja" class="anchor">
  2. <div class="container">
  3. <div class="logo"><a href="index.php">Mazurski 1.0</a></div>
  4. <div class="menu"><a href="">Serwer</a> <a href="">Rejestracja</a> <a href="">Forum</a>
  5.  
  6.  
  7. </div>
  8.  
  9. </nav>


Chce, aby po naciśnięciu rejestracja do diva newsy wczytywał się plik ' rejestracja.php ', który wygląda następująco:

  1. <form method="post" action="newacc.php">
  2. Account Number:
  3. <?
  4. $account = rand(100000, 999999);
  5. print '' . $account . ' <input type="hidden" name="account" value"' . $account . '">' ." \n";
  6. ?><br>
  7.  
  8. Nick:<input type="text" name="nick" maxlength="20" /> <p3>(Maksymalnie 20 znaków!)</p3><br>
  9. Password:<input type="password" name="pass" maxlength="10"><p3>(Maksymalnie 10 znaków!)</p3><br>
  10. Płeć:<br><input type="radio" name="sex" value="1" checked> Male <br>
  11. <input type="radio" name="sex" value="0"> Famale <br>
  12. Klasa:<br><input type="radio" name="vocation" value="1" checked> Sorcerer<br>
  13. <input type="radio" name="vocation" value="2" > Druid<br>
  14. <input type="radio" name="vocation" value="3" > Paladin<br>
  15. <input type="radio" name="vocation" value="4" > Knight<br>
  16. <input type="submit" value="Create">&nbsp;
  17. <input type="reset" value="Reset">
  18.  
  19. </form>
  20.  


To jak mam to zrobić?
Go to the top of the page
+Quote Post
erix
post 7.08.2012, 11:48:20
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Oczekujesz gotowca?

Zajrzyj, z łaski swojej, na stronę jQuery, do której zalinkował ~markonix.

Weź się do roboty, inaczej zamykam temat.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Shido
post 7.08.2012, 11:55:19
Post #7





Grupa: Zarejestrowani
Postów: 121
Pomógł: 22
Dołączył: 22.06.2012

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


  1. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  2. <a id="rejestracja">Rejestracja</a>
  3. $('#rejestracja').click(function() {
  4. $('.newsy').load('test.php');
  5. });
  6. <div class="newsy">to jest sobie news od razu widoczny po wejsciu na strone</div>


Potnij i powciskaj gdzie potrzebujesz.
(By to dobrze pociąć i wiedzieć jak to działa trza przynajmniej minimalną wiedzę mieć o jquery więc tak czy inaczej poczytaj o tym )

@up. normalnie bym tego nie wstawił po twoim poście, ale już miałem gotowe, to co się będzie marnowało.

Ten post edytował Shido 7.08.2012, 11:56:33


--------------------
Sorka za błędy ort. jak coś dajcie znać na PW to popoprawiam.
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 12:30:18
Post #8





Goście







Mimo tego, że dałeś mi gotowca to i jak coś źle zrobiłem i po kliknięciu na "Rejestracja" nie ma żadnego efektu. Nadal jest napis "to jest sobie news od razu widoczny po wejsciu na strone"

Tak index wygląda:

  1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  2. </head>
  3. <nav id="nawigacja" class="anchor">
  4. <div class="container">
  5. <div class="logo"><a href="index.php">Mazurski 1.0</a></div>
  6. <div class="menu"><a href="">Serwer</a> <a href="" id="rejestracja">Rejestracja</a> <a href="">Forum</a>
  7.  
  8.  
  9. </div>
  10. </div>
  11. </nav>
  12.  
  13. <header>
  14. <div class="div1"</div>
  15. </header>
  16.  
  17. <header>
  18. $('#rejestracja').click(function() {
  19. $('.newsy').load('rejestracja.php');
  20. });
  21. <div class="newsy">to jest sobie news od razu widoczny po wejsciu na strone</div>
  22. </header>
  23. </body>
  24. </html>


Dziesiątego patrze, że będzie trzeba jQuery przestudiować.. biggrin.gif
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 12:53:00
Post #9





Goście







Teraz zauważyłem, że po dodaniu
  1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
przestaje działać Slideshow.
Go to the top of the page
+Quote Post
erix
post 7.08.2012, 12:55:27
Post #10





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




preventDefault.

Cytat
przestaje działać Slideshow.

Konsola błędów prawdę Ci powie.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 13:00:16
Post #11





Goście







Już naprawione, pozostaje tylko kwestia tego gotowca.. ;d
Go to the top of the page
+Quote Post
Shido
post 7.08.2012, 13:06:11
Post #12





Grupa: Zarejestrowani
Postów: 121
Pomógł: 22
Dołączył: 22.06.2012

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


porównaj to co ci dałem:
  1. <a id="rejestracja">Rejestracja</a>

a to co ty masz:
  1. <a href="" id="rejestracja">Rejestracja</a>

pozbądź się różnicy i spróbuj ponownie.

(przynajmniej u mnie wtedy działało)

Ten post edytował Shido 7.08.2012, 13:09:38


--------------------
Sorka za błędy ort. jak coś dajcie znać na PW to popoprawiam.
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 13:43:42
Post #13





Goście







O cholera, działa.
Nie spodziewałem się, że "href" może spowodować to, że nie będzie działało. A chciałem w href dać #nazwadiva, aby przewinęło stronę do diva.
Go to the top of the page
+Quote Post
-Ciaupciek-
post 7.08.2012, 13:56:33
Post #14





Goście







Ech, pisałem wcześniej temat z problemem i nikt nie odpowiedział. Dotyczył on tego, że jak dałem w <section id="opis> parę linijek tekstu to <section id="opis1">
przesuwał się do dołu. Gdy było, np. 7 linijek, usunąłem 5 to wszystko na stronie było już nie w swoim miejscu.
Pomyślałem, że wczytanie pliku do DIV'a jakoś pomoże, pozamieniałem <section> na DIV'y i nadal jest ten sam problem.
HTML
  1. <nav id="nawigacja" class="anchor">
  2. <div class="container">
  3. <div class="logo"><a href="index.php">Mazurski 1.0</a></div>
  4. <div class="menu"><a href="">Serwer</a> &nbsp;&nbsp;&nbsp;&nbsp; <a id="rejestracja">Rejestracja</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="">Forum</a> <p5><?php print (''.$_SERVER['REMOTE_ADDR'].''); ?></p5>
  5.  
  6.  
  7. </div>
  8. <div class="jezyk"><a href="en/index.php"> </a></div>
  9. </div>
  10. </nav>
  11.  
  12. <div id="status"><br>
  13. <? include 'config.php';?>
  14. <?php
  15. $ilosc = count(glob("$diraccount/*.*"));
  16. $ilosc_monsters = count(glob("$dirmonsters/*.*"));
  17. ?>
  18. <div style="position: relative; top: -10px;">
  19. <font color=red><b><?=$nazwa_serwera?></b><br></font>
  20. <b>IP: <?=$ip_serwera?><br>
  21. PORT: <?=$port_serwera?></b><br>
  22. Istniejących kont: <?=$ilosc;?><br>
  23. Ilość potworów: <?=$ilosc_monsters;?><br>
  24. </div>
  25.  
  26.  
  27.  
  28. <?php
  29.  
  30. $info = chr(6).chr(0).chr(255).chr(255).'info';
  31. $sock = @fsockopen($ip_serwera, $port_serwera, $errno, $errstr, 1);
  32.  
  33. if ($sock)
  34. {
  35. fwrite($sock, $info);
  36. $data='';
  37.  
  38. while (!feof($sock))
  39. $data .= fgets($sock, 1024);
  40. fclose($sock);
  41.  
  42. print '<div style="position: relative; top: -23px; font-size: 13; font-weight: bold; color: darkgreen"><br><font color="green">ONLINE!</font></div>';
  43. preg_match('/players online="(\d+)" max="(\d+)" peak="(\d+)"/', $data, $matches);
  44. print '<div style="position: relative; top: -25px; font-size: 11; font-weight: normal; color: #000000"><font face="verdana"><strong>Graczy:</strong></font> ';
  45. print $matches[1] . '/' . $matches[2];
  46.  
  47. preg_match('/uptime="(\d+)"/', $data, $matches);
  48. $h = floor($matches[1] / 3600);
  49. $m = floor(($matches[1] - $h*3600) / 60);
  50.  
  51.  
  52. print "<br><strong>Uptime:</strong> $h " . ($h==1? 'godzina' : ($h==2||$h==3||$h==4? 'godziny' : 'godzin'));
  53. print " $m " . ($m==1? 'minuta' : ($m==12||$m==13||$m==14? 'minut' : ($m%10==2||$m%10==3||$m%10==4? 'minuty' : 'minut'))) . '</div>';
  54. }
  55. else
  56. print '<div style="position: relative; top: -23px;font-size: 13; font-weight: bold; color: red"><br>OFF!</div>';
  57.  
  58.  
  59. ?> </strong></div>
  60. <header class="anchor">
  61.  
  62. <div class="container">
  63. <div id="content">
  64.  
  65. <div class="content-top">
  66.  
  67. <div class="content-bot">
  68.  
  69.  
  70.  
  71. <div id="homepage">
  72.  
  73. <div id="left">
  74.  
  75.  
  76. <script type="text/javascript" src="slideshow.js?v42"></script>
  77.  
  78. <script type="text/javascript" src="/wow/static/local-common/js/third-party/swfobject.js?v42"></script>
  79.  
  80.  
  81.  
  82. <div id="slideshow" class="ui-slideshow">
  83.  
  84. <div class="slideshow">
  85.  
  86.  
  87.  
  88. <div class="slide" id="slide-0"
  89.  
  90. style="background-image: url(images/1.png); ">
  91.  
  92.  
  93.  
  94. </div>
  95.  
  96.  
  97.  
  98. <div class="slide" id="slide-1"
  99.  
  100. style="background-image: url(images/2.png); display: none;">
  101.  
  102.  
  103.  
  104. </div>
  105.  
  106.  
  107.  
  108. <div class="slide" id="slide-2"
  109.  
  110. style="background-image: url(images/3.png); display: none;">
  111.  
  112.  
  113.  
  114. </div>
  115.  
  116.  
  117.  
  118. <div class="slide" id="slide-3"
  119.  
  120. style="background-image: url('images/4.png'); display: none;">
  121.  
  122.  
  123.  
  124. </div>
  125.  
  126.  
  127.  
  128. <div class="slide" id="slide-4"
  129.  
  130. style="background-image: url('images/5.png'); display: none;">
  131.  
  132.  
  133.  
  134. </div>
  135.  
  136. </div>
  137.  
  138.  
  139.  
  140. <div class="paging">
  141.  
  142.  
  143.  
  144. <a href="java script:;" id="paging-0"
  145.  
  146. onclick="Slideshow.jump(0, this);"
  147.  
  148. onmouseover="Slideshow.preview(0);"
  149.  
  150. class="current">
  151.  
  152. </a>
  153.  
  154.  
  155.  
  156. <a href="java script:;" id="paging-1"
  157.  
  158. onclick="Slideshow.jump(1, this);"
  159.  
  160. onmouseover="Slideshow.preview(1);"
  161.  
  162. >
  163.  
  164. </a>
  165.  
  166.  
  167.  
  168. <a href="java script:;" id="paging-2"
  169.  
  170. onclick="Slideshow.jump(2, this);"
  171.  
  172. onmouseover="Slideshow.preview(2);"
  173.  
  174. >
  175.  
  176. </a>
  177.  
  178.  
  179.  
  180. <a href="java script:;" id="paging-3"
  181.  
  182. onclick="Slideshow.jump(3, this);"
  183.  
  184. onmouseover="Slideshow.preview(3);"
  185.  
  186. >
  187.  
  188. </a>
  189.  
  190.  
  191.  
  192. <a href="java script:;" id="paging-4"
  193.  
  194. onclick="Slideshow.jump(4, this);"
  195.  
  196. onmouseover="Slideshow.preview(4);"
  197.  
  198. class=" last-slide">
  199.  
  200. </a>
  201.  
  202. </div>
  203.  
  204.  
  205.  
  206. <div class="caption">
  207.  
  208. <h3><a href="#" class="link"></a></h3>
  209.  
  210.  
  211.  
  212. </div>
  213.  
  214.  
  215.  
  216. <div class="preview"></div>
  217.  
  218. <div class="mask"></div>
  219.  
  220. </div>
  221.  
  222.  
  223.  
  224. <script type="text/javascript">
  225.  
  226. //<![CDATA[
  227.  
  228. $(function() {
  229.  
  230. Slideshow.initialize('#slideshow', [
  231.  
  232. {
  233.  
  234. image: "images/1.png",
  235.  
  236.  
  237. title: "Interesujące miejsca!",
  238.  
  239. url: "",
  240.  
  241. id: "5469718"
  242.  
  243. },
  244.  
  245. {
  246.  
  247. image: "images/2.png",
  248.  
  249.  
  250. title: "Ciekawe zadania!",
  251.  
  252. url: "",
  253.  
  254. id: "5469724"
  255.  
  256. },
  257.  
  258. {
  259.  
  260. image: "images/3.png",
  261.  
  262.  
  263. title: "Niezliczone nagrody!",
  264.  
  265. url: "",
  266.  
  267. id: "5543230"
  268.  
  269. },
  270.  
  271. {
  272.  
  273. image: "4.png",
  274.  
  275. title: "Areny gladiatorów!",
  276.  
  277. url: "",
  278.  
  279. id: "5490809"
  280.  
  281. },
  282.  
  283. {
  284.  
  285. image: "5.png",
  286.  
  287.  
  288. title: "Ogromne piekła z wieloma tajemnicami!",
  289.  
  290. url: "",
  291.  
  292. id: "5338753"
  293.  
  294. }
  295.  
  296. ]);
  297.  
  298.  
  299.  
  300. });
  301.  
  302. //]]>
  303.  
  304. </script>
  305.  
  306. <div class="news">
  307.  
  308. dsadsa<br>
  309. dsadsa<br>
  310. dsadsa<br>
  311. dsadsa<br>
  312. dsadsa<br>
  313. dsadsa<br>
  314. dsadsa<br>
  315. dsadsa<br>
  316. dsadsa<br>
  317. dsadsa<br>
  318.  
  319. </div>
  320.  
  321. </header>
  322.  
  323. <header>
  324. $('#rejestracja').click(function() {
  325. $('.header1').load('acc.php');
  326. });
  327. <div class="header1">to teskt jest od razu widoczny po wejsciu na strone</div>
  328. </header>


CSS:

  1. body{
  2. margin: 0;
  3. font-family: Helvetica;
  4. font-size: 13px;
  5. color:#8b8b8b;
  6. background-color:#f1f0ef;
  7.  
  8. }
  9.  
  10. #nawigacja {
  11. background: url("images/menu.png");
  12. border-style:none;
  13. width:100%;
  14. height:54px;
  15. position: absolute;
  16. top:0px;
  17. z-index: 10;
  18. }
  19.  
  20. background: #ffffff;
  21. min-height: 317px;
  22. margin-top: 150px;
  23.  
  24. }
  25.  
  26. #rejestracja {
  27. min-height:1000px;
  28. }
  29.  
  30. #forum {
  31. height:600px;
  32. background: #e8e8e9;
  33. text-align: center;
  34. }
  35.  
  36. .news {
  37. width: 600px;
  38. height: auto;
  39. float: left;
  40. margin-top: 50px;
  41. margin-left: 480px;
  42. top: -350px;
  43. position: relative;
  44. }
  45.  
  46.  
  47.  
  48. h1{
  49. font-size: 16px;
  50. }
  51.  
  52. strong{
  53. color:#6ea031;
  54. }
  55.  
  56. a{
  57. color: #e8e8e9;
  58. text-decoration:none;
  59. }
  60.  
  61. a:active{
  62. color: #fff;
  63. text-decoration:none;
  64. }
  65.  
  66. a:hover{
  67. color: #fff;
  68. text-decoration:none;
  69. }
  70.  
  71.  
  72. .container{
  73. width: 900px;
  74. z-index: 0;
  75. margin: 0 auto 0 auto;
  76.  
  77.  
  78. }
  79.  
  80. .logo {
  81. margin-top: 20px;
  82. text-align: left;
  83. font-size: 15px;
  84. }
  85. .menu {
  86. margin-top:-18px;
  87. text-align: center;
  88. font-size: 16px;
  89. }
  90. .jezyk {
  91. margin-top: -15px;
  92. text-align: right;
  93. font-size: 11px;
  94. }
  95.  
  96. #status {
  97. background-color: #fff; height: 90px; width: 200px; float: right; top: -90px; position: relative; border-top-right-radius: 5px; border-top-left-radius: 5px; text-align: center; margin-right: 5px; -webkit-transition: all 1s ease;
  98. }
  99. #status:hover {
  100. background: #fff 100% 0; height: 150px; width: 250px; float: right; top: -95px; position: relative; text-align: center; margin-right: 5px; border-radius: 5px; -webkit-transition: all 1s ease;
  101. }
  102.  
  103. h2 {
  104. position: relative;
  105. top: -290px;
  106. font-size: 16px;
  107. }
  108.  
  109. input {border-radius: 5px;}
  110. p3 {
  111. color: #000000;
  112. }
  113.  
  114. p4 {
  115. position: relative;
  116. top: -285px;
  117. }
  118.  
  119. p5 {
  120. position: relative;
  121. color: #fff;
  122. float: right;
  123. right: -175px;
  124. font-size: 9px;
  125. top: -19px;
  126. }
  127.  
  128. .galeria {
  129. margin: 50px auto 0 auto;
  130. width: 900px;
  131. height: 252px;
  132. background-color: #f2f2f2;
  133. border-radius: 5px;
  134. border: 7px solid rgba(0,0,0,.05);
  135. background-clip: padding-box;
  136. box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  137. position: relative;
  138. top: 25px;
  139.  
  140.  
  141. }
  142.  
  143. div.galeria1{
  144.  
  145. margin-left:290px;
  146. margin-top: 22px;
  147. margin-bottom: 28px;
  148. overflow: hidden;
  149. float: left;
  150.  
  151.  
  152.  
  153. }
  154. div.galeria1 div{
  155. width: 252px;
  156. height: 252px;
  157. text-align: center;
  158. position: absolute;
  159. margin-left: -255px;
  160.  
  161.  
  162.  
  163. }
  164. div.galeria1 div.first {
  165. z-index: 1;
  166.  
  167. }
  168.  
  169.  
  170.  
  171. div.praca{
  172.  
  173. margin-left: 600px;
  174. margin-top: -240px;
  175. margin-bottom: 28px;
  176. float: left;
  177. display: block;
  178.  
  179.  
  180.  
  181.  
  182. }
  183. div.praca div{
  184. width: 252px;
  185. height: 252px;
  186. text-align: center;
  187. position: absolute;
  188. margin-left: -255px;
  189.  
  190.  
  191. }
  192. div.praca div.first {
  193. z-index: 1;
  194.  
  195. }
  196.  


Coś musi być nie tak z CSS, nie mam pojęcia co jest źle. Nie ma w ogóle tekstu w <div class="newsy"> to napis "to teskt jest od razu widoczny po wejsciu na strone" w <div class="header1"> jest w pierwszej linii.
Gdy dodam, np. 3 linijki tekstu w <div class="newsy"> to napis "to teskt jest od razu widoczny po wejsciu na strone" w <div class="header1"> przesuwa się do dołu... :/
Pomógłby ktoś uporać się z tym błędem?
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 09:27