Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jak zrobić taki efekt
Forum PHP.pl > Forum > PHP
wiciu010
jak zrobić coś takiego jak tutaj http://www.ftb.pl/ chodzi o ten box pod menu gdzie jest najnowsze wiadomości? Że jak najade na spis wiadomości to zmieniaja się po lewej treści? Da się to tylko za pomocą css+php i oczywiście tresci pobierane z mysql?
Xniver
Będziesz potrzebował jeszcze Javascriptu
matix
Ja proponuję advAjax.

Po prostu z prawej strony dajesz linki w postaci:

  1. <ul>
  2. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  3. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  4. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  5. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  6. </ul>


Tworzysz teraz funkcję getContentOfAjax(url) no i pobierasz ajaxem dane z danego URL do wskazanego przez ciebie DIV-a.

Wszystko =)
wiciu010
Cytat(matix @ 9.03.2008, 10:21:35 ) *
Ja proponuję advAjax.

Po prostu z prawej strony dajesz linki w postaci:

  1. <ul>
  2. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  3. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  4. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  5. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  6. </ul>


Tworzysz teraz funkcję getContentOfAjax(url) no i pobierasz ajaxem dane z danego URL do wskazanego przez ciebie DIV-a.

Wszystko =)


a mógłbyś mi napisać jakby wyglądała taka funkcja getContentOfAjax(url) ? i jak pobierać dane ajaxem z danego URL, i wstawić do diva?
bim2
  1. function getContentOfAjax(url) {
  2. advAJAX.get({
  3. url: url,
  4. onSuccess : function(obj) {
  5. //ramka('loading');
  6. document.getElementById('divka').innerHTML = obj.responseText;
  7. },
  8. onError : function(obj) {
  9. alert(obj.status);
  10. }
  11. });
  12. }
  13. <div id="divka"></div>
  14. <ul>
  15. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  16. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  17. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  18. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContentOfAjax(this.href);return false;">How to make...</a></li>
  19. </ul>


EDIT: Aha, potrzebujesz do tego biblioteki advAjax stworzonej przez anakina (advAjax.anakin.us)
phpion
Nie sądzicie, że wasze rozwiązanie jest nie do końca poprawne? Otóż po co za każdym razem wywoływać Ajax przy każdym najechaniu myszki na dany link? Ja zrobiłbym to inaczej: pobrał zawartość wszystkich elementów (np. z bazy) i wyświetlił na stronie w formie zakładek. Przy przejściu pomiędzy kolejnymi zakładkami nie odbywałoby się żadne żądanie do serwera; cała praca spadłaby na JavaScript. Użycie Ajaxa wydaje mi się zbędne; "zwykłe" JS zrobi dokładnie to samo ale szybciej i wydajniej.
windman
Cytat(phpion @ 9.03.2008, 22:02:54 ) *
Nie sądzicie, że wasze rozwiązanie jest nie do końca poprawne? Otóż po co za każdym razem wywoływać Ajax przy każdym najechaniu myszki na dany link? Ja zrobiłbym to inaczej: pobrał zawartość wszystkich elementów (np. z bazy) i wyświetlił na stronie w formie zakładek. Przy przejściu pomiędzy kolejnymi zakładkami nie odbywałoby się żadne żądanie do serwera; cała praca spadłaby na JavaScript. Użycie Ajaxa wydaje mi się zbędne; "zwykłe" JS zrobi dokładnie to samo ale szybciej i wydajniej.


Popieram, pewnie będziesz tak jak na wspomnianej stronie pokazywał tylko kilka rekordów, można je bez problemu wstawić do ukrytych div'ów i po najechaniu myszką pokazywać.
Po co niepotrzebnie obciążać serwer?

Pozdrawiam
bim2
No to:
  1. function getContent(id) {
  2. document.getElementById('div_'+id).display = "block";
  3. }
  4. <div id="div_1">Tutaj tresc1</div>
  5. <div id="div_2">Tutaj tresc2</div>
  6. <div id="div_3">Tutaj tresc3</div>
  7. <div id="div_4">Tutaj tresc4</div>
  8. <ul>
  9. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContent(1);return false;">How to make...</a></li>
  10. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContent(2);return false;">How to make...</a></li>
  11. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContent(3);return false;">How to make...</a></li>
  12. <li><a href="news/1/how-to-make-somethink" onmouseOver="getContent(4);return false;">How to make...</a></li>
  13. </ul>

:]
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.