Problem z rozjeżdżającym się czatem na stronie

Dla specjalistów Webmastering
#1
#2

Czy chodzi o przewijanie w okienku,jeśli tak to zmień w stylach overflow:hidden; na overflow:scroll;

#3

Tak, chodzi mi o przewijanie w okienku, ale może się to da zrobić bez paska przewijania tylko żeby się tekst pisany na czacie przesuwał do góry.

Może ktoś mi w tym pomóc ? :frowning:

#4

Określ ilość wyświetlanych wpisów na czacie od najnowszych.

#5

Jest ich w okienku 11. Pomógłbyś mi to zrobić tak żebym miał to dobrze zrobione ?

Chodzi o to żeby się okienko z czatem nie rozciągało w dół tylko utrzymywało swoją stałą długość, a jak będziemy pisali na czacie to żeby tekst się przesuwał do góry.

Np. Tak jest też na czacie na Onecie zrobione czy na interii. Pomógłby mi ktoś to zrobić ?

#6

http://forum.php.pl/lofiversion/index.php/t132958.html

ustal css height i max-height

oraz overflow: auto

i jest tam opisane jak zrobić żeby scroll był na końcu rozmowy.

#7

grzelix próbuje zrobić tak jak poniżej ale to mi nic nie daje i dalej okienko z czatem przesuwa się w dół :frowning:

#daddy-shoutbox {

    background-color: #3e5468;

    padding: 5px;

    font-size: 0.85em;

}


#daddy-shoutbox .shoutbox-list {

    background-color: #86aed7;

    padding: 5px;

}


#daddy-shoutbox .co_drugi_wpis {

    background-color: #4684c1;

}


#daddy-shoutbox .shoutbox-list .shoutbox-list-nick { font-weight: bold; color: #333333; padding: 0 3px }

#daddy-shoutbox .shoutbox-list .shoutbox-list-time { color: #333333; padding: 0 3px; }


#daddy-shoutbox .Height {

    height: 7px;

    overflow:auto;

}

Próbowałem jeszcze tak:

#daddy-shoutbox {

    background-color: #3e5468;

    padding: 5px;

    font-size: 0.85em;

    height: 95px;

    overflow:auto;

}

Ale wtedy pojawia mi się pasek przewijania poza oknem czata i wtedy mogę tym paskiem przesuwać całego czata a nie tylko rozmowy :frowning:

Możesz mi jakoś pomóc ?

#8

spróbuj z tym:

daddy-shoutbox-list

#9

grzelix zrobiłem tak:

#daddy-shoutbox-list {

      height: 270px;

      overflow:auto;

    }

Powiedzmy że działa, ale jak się pisze tekst na czacie to wtedy tekst przesuwa się do góry ale żeby zobaczyć nowy tekst musze przesunąć pasek w dół :frowning:

Jak zrobić żeby ten pasek był na dole, bo też nie mogę tego znaleźć :frowning:

#10

dodaj js do metody refresh chyba będzie najlepiej (było opisane w linku który ci podałem)

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

a.scrollTop = a.scrollHeight;
#11

grzelix dodałem sobie i nie działa bo za każdym razem kiedy się coś się pisze na czacie to pasek przesuwa się do góry i nie widać co było napisane tylko trzeba przesunąć pasek w dół dopiero wtedy widać, zobacz:

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-)’,‘:cry:’,‘:-/’,‘:shock:’,‘:evil:’,‘:!:’,‘:idea:’,‘:lol:’,‘:-x’,‘:mrgreen:’,‘:-}’,‘:-P’,‘:-k’,‘:oops:’,‘:roll:’,‘:-(’,‘:-)’,‘:->’,‘:-]’,‘:-o’,‘;-)’,‘:?:’,‘:arrow:’); for ($i=0;$i echo ’ icon_'. $listaEmotek['graph'][$i] .'.gif

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

#12 
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);

}
#13

Byłoby już, tylko że treść na czacie wyświetla się teraz z kilku sekundowym opóźnieniem. Jak się wpisze tekst na czat to pojawia się on po 3 sekundach.

Można zrobić żeby był od razu ? żeby to jakoś lepiej działało ?

Chcesz to sobie sprawdz: http://www.history.is.net.pl/czat

#14

spróbuj tak:

function success(response, status) { 

    if(status == 'success') {

        lastTime = response.time;

        $('#daddy-shoutbox-response').html('');

        $('#daddy-shoutbox-list').append(prepare(response, $('#daddy-shoutbox-list').children().length));

        $('input[@name=message]').attr('value', '').focus();

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


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

a.scrollTop = a.scrollHeight;


        timeoutID = setTimeout(refresh, 3000);

    }[/code]
#15

grzelix zrobiłem i zobacz na stronce u mnie czy jest dobrze według Ciebie ?

Czy dałoby się to poprawić żeby te paski niebieskie przesuwały się równomiernie ?

Pod przeglądarka IE mam tak:

czacik.png

A pod przeglądarką google chrome mam tak: - tutaj jeszcze widać na górze kawałek paska ciemno niebieskiego a nie powinno go widać

czaciiik.png

Możesz mi pomóc ?

#16

Można to spróbować poprawić ale jest najprościej mówiąc nieopłacalne.

  1. musiałbyś uwzględnić przeglądarki, systemy operacyjne, rozdzielczości ekranów (i nie wiem czy nie jeszcze kilka zmiennych) żeby zawsze było idealnie

  2. a co w przypadku kiedy będziesz miał komentarz wielolinijkowy

  3. a kiedy użyjesz emotikony

  4. lub innej dekoracji tekstu

Krótko możesz próbować, ale ja się tego nie podejmę.

#17

dzięki serdeczne za pomoc grzelix