Wyświetlanie kolorów na czacie

Dla specjalistów Webmastering
#21

Przycisk Wyślij nie działa, bo jego procedura obsługi nie została (jeszcze) poprawiona.

Przykład z edycją linii tekstu jest prosty, ale jak widać ma swoje niedoskonałości.

Dodaj w style.css dla elementu #message dodatkowy wpis “overflow: hidden;”

Być może dla IE trzeba zmodyfikować linie

Editor = document.getElementById('message').contentWindow.document;

    Editor.designMode = "on";

na następujące:

Editor = document.getElementById('message').contentWindow.document;

    Editor.body.contentEditable = true;

    Editor.designMode = "on";

sprawdzę to w wolnej chwili.

#22

Zrobiłem tak i dalej nie można nic napisać na czacie i czemu w polu pisania tekstu jest scroll ? :frowning: W przeglądarce Interner Explorer też pisać się nie da :frowning: Tak to teraz wygląda:

style.css

#message { margin: 2px 2px 0 1px; padding: 0; width: 510px; height: 1.5em; font-size: 12px; background-color: #ffffff; overflow: hidden;}

czat.php

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

#23

Wywal z pliku style.css, przy #message wpis “overflow: hidden;” (jest zbędny) i przy okazji zmniejsz szerokość tego pola “width: 500px;”, bo się przycisk “Wyślij” nie mieści w linii (u mnie). I wywal przycisk “Zamknij tagi” jako zbędny teraz.

Popraw w pliku czat.php linię związaną z IFRAME na taką:

[/code]

Sprawdziłem, dlaczego znikł tekst z czata - to przez to, że wysyłałeś puste teksty na niego a on pamięta ostatnie 11 wierszy. Puste linie były dlatego, że jeszcze nie poprawiliśmy funkcji, która pobiera sformatowany tekst i go wysyła - zajmę się tym jutro po południu. Zajmę się też funkcją wstawiającą emotki to tekstu (bo i ją trzeba teraz nieco poprawić).

P.S. Plik z tekstami z czata jest w /shoutbox/messages.txt - jak tam coś wpiszesz (w 3 kolumnę - zaraz po nicku a przed IP) to się przekonasz, że treść jest w oknie czata wyświetlana.

#24

Poprawiłem te rzeczy o których pisałeś i tak to wygląda: http://www.history.is.net.pl/czat

czat.php

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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

#25

Zauważyłem, że w niektórych przeglądarkach to pole tekstowe da się przewijać (np. kółkiem myszki) w dół i górę (niewiele, ale jednak). Stąd taki krótki kursor (bo pole jest wyższe i część jego jest schowane u dołu). Jeszcze nie wiem, jak to poprawić, zajmę się wpierw ważniejszymi rzeczami.

Pisałem (ile razy muszę by dotarło), że wysyłanie tekstu jeszcze nie jest poprawione i dlatego źle działa. Samo się nie poprawi przecież! Zajmę się tym dziś po południu.

#26

Mam nadzieje, że uda się to jakoś zrobić fajnie.

#27

Poniższych zmian nie miałem jak przetestować, ale mam nadzieję że powinny pomóc.

  1. W pliku czat.php dodaj jedną linią między poniższe dwie linie:

    [/code]
    tak by teraz kod wyglądał następująco:

[code]
2. W funkcji validate (w tym samym pliku czat.php) tuż za pierwszą linią postaci

function validate(formData, jqForm, options) {

dopisz poniższy kod:

var Editor = document.getElementById('message').contentWindow.document;

    formData[0].value=Editor.body.innerHTML;

    $('input[@name=message]').val(Editor.body.innerHTML);

Reszta funkcji bez zmian.

To nie jest wszystko co trzeba zrobić - testując wpisuj na razie tylko zwykły tekst (nie sformatowany). Jak to zadziała, to zajmę się dalszą częścią.

#28

Zrobiłem tak jak napisałeś, ale wiadomości na czacie nie mogę wysyłać przyciskając klawisz „enter” na klawiaturze tylko musze specjalnie kliknąć w „wyślij”. I tak np. w przeglądarce IE tekst mi się wyświetla na czacie w takiej postaci:

kisiel

a w gogle chrome tak: paweł test

i wysyłają się też puste wiadomości typu

:frowning: Poza tym tekst wpisywany w pole tekstowe czata po wysłaniu się nie kasuje tylko zostaje i mogę ten tekst powielać :frowning:

Kod pliku czat.php wygląda teraz tak:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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

#29

No właśnie, wyszło w testach kilka błędów do poprawienia. O Enterze to wiedziałem i to poprawię - dzieje się tak, bo to pole do wpisywania akceptuje też przejście do nowej linii (co trzeba zablokować).

Zajmę się tym dziś późnym wieczorem, może na jutro rano będzie większość rzeczy poprawionych.

#30

Super, ciesze się, Mam nadzieje że tym razem będzie działać dobrze. Z kursorem w polu tekstowym też jest problem, bo jest on na dole w przeglądarce Google Chrome a w Internee Explorer jest na srodku. W obydwóch przeglądarkach przycisk „wyślij” jest nie równo z polem tekstowym, tak trochę za nisko. Można ten przycisk wyrównać z wysokością pola tekstowego ?

#31

Kolejne poprawki do zrobienia - wszystko w pliku czat.php:

  1. trzeba wstawić dodatkowy kod między poniższe linie:

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

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

tak by kod wyglądał następująco:

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

        Editor.body.innerHTML='';

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

To będzie czyściło wpisany tekst, który został wysłany na czat. 2. Między funkcjami konwertujEmotki a prepare (lub w innym miejscu) musisz dodać kolejną funkcję:

function html2bbcode(text)

{

  text=text.replace(/
/gi,'');

  text=text.replace(/(.*?)<\/b>/gi,'[b]$1[/b]');

  text=text.replace(/(.*?)<\/i>/gi,'[i]$1[/i]');

  text=text.replace(/(.*?)<\/u>/gi,'[u]$1[/u]');

  text=text.replace(/

oraz dodać jedną linijkę na samym początku funkcji validate

function validate(formData, jqForm, options) {

    formData[0].value=html2bbcode(Editor.body.innerHTML);

(dalej kod bez zmian).

Dzięki tym zmianom będzie już działać wysyłanie sformatowanego tekstu i jego poprawne wyświetlanie - wysyłamy jeszcze wciąż przy pomocy przycisku.

#32

Zrobiłem tak, ale po przyciśnięciu przycisku „wyślij” wyskakuje ten błąd:

{"response":"Good work","nickname":"NorthAngel","message":"","time":1363906508}

Tak wygląda teraz plik czat.php

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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

#33

Aby Enter również wysyłał wpisany tekst, musisz pod koniec dodać dwa wiersze, tak to powinno docelowo wyglądać:

Editor.body.contentEditable = true;

    $(Editor.body).keypress(function(e) { var code = (e.keyCode ? e.keyCode : e.which);

                                          if (code == 13) { e.preventDefault(); $('#daddy-shoutbox-form').submit(); } });

    Editor.designMode = "on";

Coś się zdublowało w funkcji validate , powinna ona mieć na początku taki kod:

function validate(formData, jqForm, options) {

    formData[0].value=html2bbcode(Editor.body.innerHTML);

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

(i dalej bez zmian).

#34

Teraz nie da się nic pisać na czacie w ogóle bo niema kursora w polu tekstowym :frowning:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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

#35

Kod jest dobry, ja nie mogę teraz sprawdzić tego w IE (zrobię to jutro), ale u mnie działa to poprawnie na Firefoksie i Chrome.

– Dodane 22.03.2013 (Pt) 0:30 –

EDIT: sprawdziłem i na Twojej stronie coś jest nie tak, u mnie lokalnie działa - masz złą funkcję validate - patrz moja uwaga wyże j.

#36

W google chrome też mi nie działa :frowning:

Kod pliku czat.php Ci pokazałem i nie wiem czemu mi nie działa :frowning:

Zobacz czy ten kod w pliku czat.php dobrze poprawiłem ?

jak klikne w „wyślij” to pojawia się to:

{"response":"Good work","nickname":"NorthAngel","message":"","time":1363908321}

– Dodane piątek, 22 marca 2013, 00:40 – Plik czat.php

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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

#37

Tak:

function validate(formData, jqForm, options) {

    formData[0].value=html2bbcode(Editor.body.innerHTML);

    $('input[@name=message]').val('');

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

        if (!formData[i].value) {

            alert('Please fill in all the fields'); 

            $('input[@name='+formData[i].name+']').css('background', 'red');

            return false;

        } 

    } 

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

    clearTimeout(timeoutID);

}[/code]

– Dodane 22.03.2013 (Pt) 0:46 –

Na dziś to tyle.

#38

Poprawilem i pod IE nie działa tak jak powinno, tzn., ze jak klikne w „wyślij” to tekst mam taki:

sssss

 

natomiast enter w ogóle nie działa.

Pod IE też gdy klikne w menu w Czat to cały tekst z czata się kasuje a nie powinien. No i emotki nie dzialaja i przycisk „wyślij” jest za nisko pola tekstowego.

W przeglądarce IE nie działa też „enter” :frowning:

W google chrome działa dobrze tylko emotki nie działają

#39

Poprawię to jutro.

#40

Ok teraz plik czat.php wygląda tak:

B I U Kolor Ciemnoczerwony Czerwony Pomarańczowy Brązowy Żółty Zielony Oliwkowy Błękitny Niebieski Ciemnoniebieski Purpurowy Fioletowy Biały Czarny 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