Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php] zmieniajacy sie tekst co 3 sekundy
Forum PHP.pl > Forum > PHP
roghatt
24.04.2009, 12:57:41
Witam.
Ponizszy kod wyswietla mi losowy link z nazwa miasta

[PHP] pobierz, plaintext 
  1. <?php
  2. $wynik4= mysql_query ("SELECT * FROM miasto ORDER BY RAND() LIMIT 1");
  3. while($row=mysql_fetch_array($wynik4))
  4. {
  5.     $city=$row['miasto'];
  6.     echo "<a target=\"_blank\" href=\"http://www.";
  7.     echo $miasto;
  8.     echo ".domena.pl\">www.";
  9.     echo $city;
  10.     echo ".domena.pl</a>";
  11.  
  12. }
  13. ?>
[PHP] pobierz, plaintext


jak zrobic aby np na stronie automatycznie co 3 sekundy pobieralo mi nowa nazwe z bazy. Po prostu zeby co 3 sekundy wyswietlal sie link do innego miasta.
albo inny sposob ze za jednym razem pobiore wszystkie nazwy z bazy i bede mial np wypisane jedno pod drugim, ale jak zrobic zeby pozniej losowo wyswietlal co 3 sekundy. Chodzi mi o samo wyswietlanie, taki automat.
kamil4u
24.04.2009, 13:25:21
Zainteresuj się AJAX-em. Najłatwiej skorzystać z gotowca typu jquery czy mintAjax, ale napisanie własnego też nie jest trudne - dobry kurs jest na Wikipedii

W sumie to jest też inna możliwość. Z bazy danych wyciągasz wszystkie dane(lub np. koło 100, zależy ile masz tych miast) i wrzucasz wszystko do tablicy, którą następnie przekazujesz do JS, a ta losuje co 3 sekundy odpowiednie miasto smile.gif
roghatt
24.04.2009, 14:13:06
widze ze ogolnie mintajax mnie zainteresowal, ale takie szybkie pytanie...
przyklady sa np:
[PHP] pobierz, plaintext 
  1. <?php
  2. function OnLoad() {  
  3.     var tabs = mint.gui.CreateTabWidget("tabsContent");
  4.  
  5.     tabs.fading = true;
  6.     tabs.activeClass = "active";
  7.     tabs.hoverClass = "hover";
  8.  
  9.     tabs.AddItem("tab1", "tab1", "text", "tab1.html");
  10.     tabs.AddItem("tab2", "tab2", "text", "tab2.html");
  11.     tabs.AddItem("tab3", "tab3", "text", "tab3.html");
  12.    
  13.     mint.fx.Round("tabsContentOuter", "all", "small", true);
  14. }
  15. ?>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <?php
  2. <div id="tab1"></div>
  3. <div id="tab2"></div>
  4. <div id="tab3"></div>
  5.  
  6. <div id="tabsContentOuter">
  7.     <div id="tabsContent"></div>
  8. </div>
  9. ?>
[PHP] pobierz, plaintext


w ktorym miejscu umieszcza sie to pierwsze?
umieszcze nie 
[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript" src="mintAjax.js"></script>
  3. ?>
[PHP] pobierz, plaintext
to inna bajka i to dodatkowo, ale gdzie ten pierwszy kod sie umieszcza?
kamil4u
24.04.2009, 14:17:39
W znacznikach <script></script> w <head>? A samą funkcję wywołujesz w ... popatrz sobie w ich źródło bo nie wiem smile.gif
roghatt
24.04.2009, 14:27:15
no wlasnie nie... tak robie i nic sie nie dzieje
czegos brakuje
piotrooo89
24.04.2009, 14:31:45
to też masz mieć w head. w znacznikach <script>.

[HTML] pobierz, plaintext 
  1. function OnLoad() {  
  2.    var tabs = mint.gui.CreateTabWidget("tabsContent");
  3.  
  4.    tabs.fading = true;
  5.    tabs.activeClass = "active";
  6.    tabs.hoverClass = "hover";
  7.  
  8.    tabs.AddItem("tab1", "tab1", "text", "tab1.html");
  9.    tabs.AddItem("tab2", "tab2", "text", "tab2.html");
  10.    tabs.AddItem("tab3", "tab3", "text", "tab3.html");
  11.  
  12.    mint.fx.Round("tabsContentOuter", "all", "small", true);
  13. }
[HTML] pobierz, plaintext


najlepiej pod deklaracją tego:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="mintAjax.js"></script>
[HTML] pobierz, plaintext
kamil4u
24.04.2009, 14:32:07
Dodaj zdarzenie load dla body:
Kod
<body onLoad="OnLoad();">


@UP: Ale funkcję należy jeszcze wywołać smile.gif
piotrooo89
24.04.2009, 14:33:22
~kamil4u chyba onload a nie onLoad.
roghatt
24.04.2009, 14:36:24
No to mam cos takiego

[HTML] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  4. <TITLE>title</TITLE>
  5. <script type="text/javascript" src="mintAjax.js">
  6. <script type="text/javascript">
  7. function OnLoad() {  
  8.     var tabs = mint.gui.CreateTabWidget("tabsContent");
  9.  
  10.     tabs.fading = true;
  11.     tabs.activeClass = "active";
  12.     tabs.hoverClass = "hover";
  13.  
  14.     tabs.AddItem("tab1", "tab1", "text", "tab1.html");
  15.     tabs.AddItem("tab2", "tab2", "text", "tab2.html");
  16.     tabs.AddItem("tab3", "tab3", "text", "tab3.html");
  17.  
  18.     mint.fx.Round("tabsContentOuter", "all", "small", true);
  19. }
  20. </script>
  21. </HEAD>
  22. <body onload="OnLoad()">
  23.  
  24. <div id="tab1"></div>
  25. <div id="tab2"></div>
  26. <div id="tab3"></div>
  27.  
  28. <div id="tabsContentOuter">
  29.     <div id="tabsContent"></div>
  30. </div>
  31. </BODY>
  32. </HTML>
[HTML] pobierz, plaintext


i wyswietla sie biala strona
plik index.html mam w tym samym katalogu co mintAjax.js
kamil4u
24.04.2009, 14:37:14
Jako atrybut HTML bez znaczenia. Jak deklarujemy zdarzenie np. tak:
Kod
referencja_do_elementu.onload = funkcja; //tu wielkość ma znaczenie (bez podtekstów)


Mówiłem wcześniej żebyś w źródło popatrzył: http://mintajax.pl/templates/mintajax/guide/widget_tabs.php
piotrooo89
24.04.2009, 14:52:22
wystyluj to.

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. 			.tab {
  4. 				cursor: pointer;
  5. 				float: left;
  6. 				clear: none;
  7. 				width: 126px;
  8. 				height: 24px;
  9. 				line-height: 24px;
  10. 				color: White;
  11. 				text-align: center;
  12. 				margin: 0px 4px;
  13. 				background-image: url(img/tab.gif);
  14. 			}
  15.  
  16. 			.hover, .active {
  17. 				background-image: url(img/tab_hover.gif);
  18. 			}
  19.  
  20. 			.tabsContentOuter {
  21. 				width: 450px;
  22. 				height: 200px;
  23. 				border: 1px solid #68660B;
  24. 				float: left;
  25. 				clear: none;
  26. 			}
  27.  
  28. 			#tabsContent {
  29. 				padding: 2px 4px;
  30. 			}
  31.  
  32. 		</style>
[HTML] pobierz, plaintext


i jeszcze pamiętaj ze w plikach tab1.html, tab2.html, tab3.html musisz coś mieć.
roghatt
24.04.2009, 14:57:30
no teraz juz dziala:) te style mnie zgubily, dzieki Wam za pomoc
Crozin
24.04.2009, 15:13:52
To teraz wywal to, bo korzystanie tutaj z AJAXa to głupota. Niepotrzebnie katujesz serwer dziesiątkami, a wręcz tysiącami bezsensownych zapytań, które również obciążają bazę.

Pobierz odrazu ok. 50 rekordów (nie ma potrzeby większej ilości. Nic się nie stanie jak po 150 sekundach ogłoszenia zaczną się powtarzać. No chyba, że z założenia użytkownik będzie miał się gapić w "dodatkowy bajer" przez 2:30 minuty i tak przeglądać treść serwisu - ale wtedy to trzeba zmienić założenie :])

1) Pobierasz 50 rekordów i wyświetlasz je w formie JSowej tablicy dwuwymiarowej:
Kod
var data = new Array(
  new Array(12, "Treść", "http://link", "data"),
  new Array(12, "Treść", "http://link", "data"),
  new Array(12, "Treść", "http://link", "data"),
  new Array(12, "Treść", "http://link", "data"),
  itd.
);
W kodzie XHTML pamiętaj o tym by wyświetlić statycznie pierwszy rekord (tak by użytkownicy bez JS również widzieli jakąś treść (statyczną)).
[HTML] pobierz, plaintext 
  1. <p id="abc"><a href="http://link"><span>data</span> Treść</a></p>
[HTML] pobierz, plaintext


I po stronie PHP to tyle. Teraz wystarczy napisać prosty skrypt JS, który:
1) Najpierw przy pomocy window.setInterval() będzie wykonywał co 3 sekundy jakąś funkcję
2) Funkcja ta przy pomocy element.removeChild(child) usunie całą treść elementu (element to referencja do p#abc, a child to referencja do p#abc > a)
3) Następnie przy pomocy document.createElement(), element.setAttribute() oraz element.appendChild() utworzy nowy link i wrzuci go w miejsce starego.

Roziwązanie dużo łatwiejsze oraz mniej pamięcio/czasożerne.
kamil4u
24.04.2009, 15:19:33
Nie żebym się czepiał, ale napisałem:
Cytat
W sumie to jest też inna możliwość. Z bazy danych wyciągasz wszystkie dane(lub np. koło 100, zależy ile masz tych miast) i wrzucasz wszystko do tablicy, którą następnie przekazujesz do JS, a ta losuje co 3 sekundy odpowiednie miasto smile.gif
(i w sumie to masz rację, że lepiej będzie nie męczyć serwera [tego już nie napisałem] smile.gif )

I pytanie o de mnie:
Cytat
2) Funkcja ta przy pomocy element.removeChild(child) usunie całą treść elementu (element to referencja do p#abc, a child to referencja do p#abc > a)
3) Następnie przy pomocy document.createElement(), element.setAttribute() oraz element.appendChild() utworzy nowy link i wrzuci go w miejsce starego.

IMO lepiej będzie jak będziemy zmieniać tylko parametry starego linku zamiast usuwać i tworzyć elementy co 3s. Nie uważasz?
Crozin
24.04.2009, 16:23:09
Racja - nie pomyślałem o tym winksmiley.jpg
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.