Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: DIV - jednoczesne automatyczne przewijanie do dołu i automatyczne przeładowywanie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
tinware
Witajcie,

po 4 dniach walki i porażek postanowiłem zwrócić się do was. Otórz razem z kolegom piszemy aplikacje czatu - dla zabawy.
Aplikacja już jest (C++), natomiast całe okno czatu leży po stronie php/javascript (serwer www).

Skrypt to okno rozmowy, a pod nim okno pisania wiadomosci - wiadomo.
O ile z tym drugim nie było żadnego problemu, to z pierwszym nien daje już rady.

Chodzi o to aby skrypt czytał zawartość pliku chat2.php zawartego w pliku chat.php, w którym to ustawione jest automatyczne przewinięcie tego pola oraz odświeżanie go co X sekund.

Oto wycinek tego skryptu:

  1.  
  2. echo '<script type="text/javascript">';
  3. echo 'window.onload=function () {';
  4. echo ' var objDiv = document.getElementById("digitalbasket");';
  5. echo ' objDiv.scrollTop = objDiv.scrollHeight;';
  6. echo '}';
  7. echo '</script>';
  8.  
  9. echo '<script src="js/autorefresh.js"></script>';
  10.  
  11. ///////////// ustawienia autorefresha
  12. $autorefresh_data = "od=$od&do=$do"; /// podaj dane do przeslania do drugiego pliku
  13. $autorefresh_divname = "digitalbasket"; /// nazwa okienka div, jesli na jednej stronie ma wystapic wiecej niz jeden takich skryptow
  14. $autorefresh_filename = "chat2.php"; /// adres i nazwa pliku
  15. $autorefresh_time = "1000"; /// czas odswiezania w milisekundach, 1sek = 1000ms
  16.  
  17. echo "<script>";
  18. echo "$(document).ready(function()";
  19. echo "{";
  20. echo "$(\"#$autorefresh_divname\").load(\"$autorefresh_filename?$autorefresh_data\");";
  21. echo "var refreshId = setInterval(function()";
  22. echo "{";
  23. echo "$(\"#$autorefresh_divname\").load('$autorefresh_filename?$autorefresh_data&randval='+ Math.random());";
  24. echo "},";
  25. echo "$autorefresh_time);";
  26. echo "$.ajaxSetup({ cache: false });";
  27. echo "});";
  28. echo "</script>";
  29. echo "<div id=\"$autorefresh_divname\" style=\"width: 485px; height: 240px; margin-top:-12px; margin-left:-3px; padding: 0px; text-align: left; overflow: auto;\"></div>";


Proszę o wyrozumiałość w stosunku do estetyki kodu oraz tego że został wyświetlony w php/echo, ale tak czy siak skrypt działa/nie działa następująco:
- po włączeniu/wejściu na strone w czatem załącza on wszystko prawidłowo, pasek przewija do dołu, lecz już po pierwszym odświeżeniu (w tym przypadku po 1 sekundzie), idzie on na samą górę i w tym miejscu już pozostaje, a zależy mi żeby co tą 1 sekund po pobraniu nowych wiadomości przesuwał się zawsze na sam dół

Forumowicze, proszę o pomoc i wytłumaczenie, gdyż o ile w php siedze od kilku lat, to js jest dla mnie nowością...

Pozdrawiam,
Kamil
kamil4u
Przy load masz możliwość dodania zdarzenia scucces, czyli funkcji, która wykona się po wczytaniu danych. W tej funkcji umieść kod odpowiedzialny za przeniesienie scroll-a na sam dół.

Cytat
po włączeniu/wejściu na strone w czatem załącza on wszystko prawidłowo, pasek przewija do dołu

Zdarzenie onload - prawidłowo

Cytat
lecz już po pierwszym odświeżeniu (w tym przypadku po 1 sekundzie), idzie on na samą górę

Zmiana treści w JS = scroll na górę
tinware
Czyli rozumiem, że w tej linijce:

  1. echo "$(\"#$autorefresh_divname\").load('$autorefresh_filename?$autorefresh_data&randval='+ Math.random());";


...mam wywołać funkcję przewijania do dołu, czyli to co działa źle już po pierwszej sekundzie na stronie.
Powiedz mi, jak ma to wygląd, jak wywołać tą funkcję z linku

Pozdrwawiam
kamil4u
http://api.jquery.com/load/#callback-function

Zamiast:
Cytat
alert('Load was performed.');

dajesz kod, który przeniesie scroll-a w odpowiednie miejsce: http://api.jquery.com/scrollTop/

kod będzie podobny do Waszego:
Cytat
objDiv.scrollTop = objDiv.scrollHeight;';
tinware
Czy chodzi o to?

  1. <script type="text/javascript">
  2. $('#result').load('chat2.php', function() {
  3. $("div.digitalbasket").scrollHeight;
  4. });
  5. </script>


lecz nie bardzo wiem jak wywołąć tą funkcję podczas automatycznego przeładowania tej strony?
kamil4u
1. Nie lubię jak ktoś nie myśli.
2. Inteligenty człowiek najpierw czyta o tym czego nie wie - potem zadaje pytania
3. Warto przeanalizować swój własny kod i go zrozumieć - dopiero potem zadawać pytania - założyłem sobie, że to co wykorzystujecie w kodzie to umiecie - niestety myliłem się

Rozwiązanie problemów:
- przeczytać kurs podstaw JS
- przeczytać kurs podstaw jQuery
- Zapoznanie się z: https://developer.mozilla.org/pl/docs/DOM/window.setInterval
- Zapoznanie się z: http://api.jquery.com/load/
- Zapoznanie się z: http://api.jquery.com/scrollTop/ lub https://developer.mozilla.org/en-US/docs/DO...ement.scrollTop
- Zapoznanie się z: https://developer.mozilla.org/en-US/docs/DO...nt.scrollHeight
- zacząć myśleć
- przeczytać jeszcze raz to co napisałem wcześniej( wcześniejsze posty )

Naprawdę to widać, że nie próbowałeś zrobić czegoś samemu, o niczym nie przeczytałeś i czekasz na gotowca. Jeszcze rozumiem, jakbyś się uczył programować to byłbym to w stanie zrozumieć, ale mówisz, że znasz C++ i PHP. Jak zobaczę, że cokolwiek zrobiłeś, żeby rozwiązać swój problem, wtedy dostaniesz gotowca( choć powinieneś sobie wtedy już poradzić sam ).

Proszę o podanie kodu jeszcze raz. Jak zobaczę, że nie napisałeś samych bzdur to postaram się pomóc. Aha! Napisz w którym miejscy chcesz umieścić ten kod.
Jak Ci nie wyjdzie to napisz. Zadam Ci kilka pytań i zobaczysz sam, że to tylko kwestia myślenia.

Pozdrawiam
tinware
Ok, zrobiliśmy. Dzięki za pomoc.
Off

Pozdrawiam.
kamil4u
Widzisz smile.gif - pewnie nie było to aż tak trudne. Wstaw jeszcze kod to może da się coś poprawić.
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.