DIV - jednoczesne automatyczne przewijanie do dołu i automatyczne przeładowywanie Opcje

[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:

[PHP] pobierz, plaintext 
 
				echo '<script type="text/javascript">';
				echo 'window.onload=function () {';
				echo '     var objDiv = document.getElementById("digitalbasket");';
				echo '     objDiv.scrollTop = objDiv.scrollHeight;';
				echo '}';
				echo '</script>';
 
				echo '<script src="js/autorefresh.js"></script>';
 
				///////////// ustawienia autorefresha
				$autorefresh_data = "od=$od&do=$do"; /// podaj dane do przeslania do drugiego pliku
				$autorefresh_divname = "digitalbasket"; /// nazwa okienka div, jesli na jednej stronie ma wystapic wiecej niz jeden takich skryptow
				$autorefresh_filename = "chat2.php"; /// adres i nazwa pliku
				$autorefresh_time = "1000"; /// czas odswiezania w milisekundach, 1sek = 1000ms
 
				echo "<script>";
				echo "$(document).ready(function()";
				echo "{";
				echo "$(\"#$autorefresh_divname\").load(\"$autorefresh_filename?$autorefresh_data\");";
				echo "var refreshId = setInterval(function()";
				echo "{";
				echo "$(\"#$autorefresh_divname\").load('$autorefresh_filename?$autorefresh_data&randval='+ Math.random());";
				echo "},";
				echo "$autorefresh_time);";
				echo "$.ajaxSetup({ cache: false });";
				echo "});";
				echo "</script>";
				echo "<div id=\"$autorefresh_divname\" style=\"width: 485px; height: 240px; margin-top:-12px; margin-left:-3px; padding: 0px; text-align: left; overflow: auto;\"></div>";
[PHP] pobierz, plaintext 

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ół.

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

Zdarzenie onload - prawidłowo

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:

[PHP] pobierz, plaintext 
echo "$(\"#$autorefresh_divname\").load('$autorefresh_filename?$autorefresh_data&randval='+ Math.random());";
[PHP] pobierz, plaintext 

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

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:

objDiv.scrollTop = objDiv.scrollHeight;';

[tinware]

Czy chodzi o to?

[PHP] pobierz, plaintext 
<script type="text/javascript">
$('#result').load('chat2.php', function() {
$("div.digitalbasket").scrollHeight;
});
</script>
[PHP] pobierz, plaintext 

lecz nie bardzo wiem jak wywołąć tą funkcję podczas automatycznego przeładowania tej strony?

Ten post edytował tinware 5.12.2012, 00:34:55

[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 (IMG:style_emoticons/default/smile.gif) - pewnie nie było to aż tak trudne. Wstaw jeszcze kod to może da się coś poprawić.