Pionowy pasek przewijania nie działa na czacie

[Bartosz82]

Na mojej stronie www mam zainstalowanego shoutboxa i jest w nim zrobiony pionowy pasek przewijania w okienku czata. Jednak problem jest w tym, że kiedy wysyłam wiadomość pasek przechodzi na dół a gdy napisze ktoś inny to wtedy pasek przesuwa się do góry. Powinien być cały czas na dole ten pasek przewijania.

Czy ktoś może mi pomóc to zrobić żeby mi ten pionowy pasek przewijania działał tak jak powinien ?

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

[grzelix]

Dodaj do metody refresh komendę ustawiającą scroll’a w odpowiedniej pozycji po każdym odświeżeniu czatu:

function refresh() {

    $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {

        if(json.length) {

            for(i=0; i < json.length; i++) {

                $('#daddy-shoutbox-list').append(prepare(json[i], $('#daddy-shoutbox-list').children().length));

                $('#list-' + count).fadeIn('slow');

            }

            var j = i-1;

            lastTime = json[j].time;

        }

        //alert(lastTime);

    });

        var a = document.getElementById('daddy-shoutbox-list');

        a.scrollTop = a.scrollHeight;

    timeoutID = setTimeout(refresh, 3000);

[Bartosz82]

grzelix zrobiłem tak jak napisałeś, ale zauważyłem że teraz trochę lepiej działa ten pasek przewijania ale jeszcze nie jest tak jak powinien.

Jak się wchodzi na czat to ten pasek jest w górze, a powinien być na dole. Dopiero jak ktoś napisze na czacie to pasek schodzi na dół. I zauważyłem też że zanim ktoś coś napisze na czacie to najpierw pasek się unosi do góry i wtedy dopiero pojawia się tekst napisany przez kogoś i wtedy pasek pionowy opada. Można to jakoś poprawić ? I czy w tym pliku z czatem ma występować dwa razy ten kod ?

var a = document.getElementById('daddy-shoutbox-list');

        a.scrollTop = a.scrollHeight;

Zobacz sobie jak wygląda cały ten plik z czatem:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

[grzelix]

kod:

var a = document.getElementById('daddy-shoutbox-list');

        a.scrollTop = a.scrollHeight;

możesz powielać tam gdzie jest potrzebny, albo zrobić z niego funkcję i odwoływać się do funkcji (nie co poprawniejsze podejście).

Gdzie jest potrzebny?

1. Po dodaniu wiadomości. (metoda success)

2. Przy odświeżeniu listy. (metoda refresh)

3. Przy załadowaniu czatu. (metoda ready)

[Bartosz82]

grzelix ok, a co zrobić żeby w przypadku gdy ktoś wklei mi na czat za długiego linka i wtedy czat wyjężdża mi poza ramy strony jak pokazałem na screenie wyżej. Jak to naprawić, żeby tak się nie działo ?

Natomiast co do pionowego paska przewijania to dalej jak wchodzę na czat to nie jest on na dole tak jak powinien tylko na gorze

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny Zamknij tagi Emotki

<?php $listaEmotek=array(); $listaEmotek[‘graph’]=array(‘biggrin’,‘confused’,‘cool’,‘cry’,‘curve’,‘eek’,‘evil’,‘exclaim’,‘idea’,‘lol’,‘mad’,‘mrgreen’,‘neutral’,‘razz’,‘eusathink’,‘redface’,‘rolleyes’,‘sad’,‘smile’,‘smile2’,‘square’,‘surprised’,‘wink’,‘question’,‘arrow’); $listaEmotek[‘text’]=array(‘:-D’,‘:-?’,‘8-)’,‘’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘’); for ($i=0;$i echo ’

‘; return string; } function success(response, status) { if(status == ‘success’) { lastTime = response.time; $(’#daddy-shoutbox-response’).html(’

[grzelix]

Na mój gust scroll działa poprawnie.

co do za długich linków pokombinuj z regułą

word-wrap: break-word;

w css nie wiem dla którego elementu, ale metodą prób błędów powinieneś dojść gdzie to powinno być zaaplikowane.

[Bartosz82]

grzelix ten kod który podałeś nie działa w ogóle. Dałem go do css i wkliłem długiego linka na czat i całego czat mi się rozjechał. Jak temu zapobiec ?

I dlaczego ten pasek przewijania przy wchodzeniu na czat jest na gorze, a po kilku sekundach opada na doł ? a powinien być od razu na dole po wejściu na czat. Jakby to poprawić ?

[grzelix]

Działa:

http://jsfiddle.net/jeu9W/

Trzeba tylko znaleźć odpowiednie miejsce.

Masz wszystkie elementy potrzebne do tego żeby ustawić pasek scrolla na dole. Sprawdź debuggerem czemu jest kilkusekundowe opóźnienie i popraw jeśli tak jak jest teraz uważasz za nie poprawne zachowanie.

[Bartosz82]

grzelix jak ten kod wklejam w plik php to wtedy mi czata w ogóle nie wyświetla, a jak wkleje ten kod do pliku style.css to nawet ten kod nie pasuje bo jest na czarno napisany:

I nie działa mi na czacie bo dalej jak wkleje długi link to czat rozwala mi po za strone moją.

Co do pionowego paska przewijania zauważyłem że jak w tym miejscu:

timeoutID = setTimeout(refresh, 3000);

Zmniejsze liczbe 3000 o mniejszą, np. dam 200 to wtedy pasek przewijania mam od razu na dole tak jak powinno być ale wtedy nie da się w ogóle przewijać paskiem ani w góre ani w dół. Więc nie wiem jak to zrobić żeby ten pionowy pasek przewijania był na dole od razu

Nie wiem jak usunąć to kilku sekundowe opóźnienie