Konfiguracja Dwukolorowy nick, wczytywanie js'u

Hej, poprawiłem grupę na dwukolorową wg kodu @Matslom - https://codepen.io/Matslom/pen/dMLdLK
Wszystko działa, po wejściu na forum i odświeżeniu strony widać efekt. Kiedy ktoś napisze na czacie (mający ten format grupy), jego login nie koloruje się na 2 kolory, ale zostaje na domyślnym, bez koloru. Póki co, obszedłem to w taki sposób, że dodałem kolor dla klasy podanej w formacie loginu. Nie chciałbym jednak, aby trzeba odświeżać stronę, aby zobaczyć 2-kolorową rangę. Ma ktoś jakiś pomysł?

Ardex napisał 26.07.2017, 16:38:
Goście nie widzą shoutboxa - podaj konto testowe.

Jak szybko otrzymać pomoc?

Podaj format tej grupy, sposób w jaki umieściłeś ten skrypt na forum, szablon w jakim kod się znajduje, usuń te rozwiązanie "zastępcze" tymczasowo i jeżeli jest taka możliwość konto testowe umieść w takiej grupie żeby kolor też miał być dwukolorowy.

<span class="group"><strong>{username}</strong></span>

- format loginu

<script>$('.group').each(function() {
  var group = $(this);
  var nick = group.text();
  var length = Math.round(nick.length/2);
  var colors = '<span class="jeden">'+ nick.slice(0, length) +'</span><span class="dwa">'+ nick.slice(length) +'</span>';
  group.html(colors);
});</script>

<script>$('.groupw').each(function() {
  var groupw = $(this);
  var nick = groupw.text();
  var length = Math.round(nick.length/2);
  var colors = '<span class="trzy">'+ nick.slice(0, length) +'</span><span class="cztery">'+ nick.slice(length) +'</span>';
  groupw.html(colors);
});</script>

<script>$('.groupm').each(function() {
  var groupm = $(this);
  var nick = groupm.text();
  var length = Math.round(nick.length/3);
  var colors = '<span class="piec">'+ nick.slice(0, length) +'</span><span class="szesc">'+ nick.slice(length) +'</span>';
  groupm.html(colors);
});</script> 


- szablon footer, na samym końcu
Usunąłem rozwiązanie tymczasowe, ewentualnie CTRL+F5
Nie mam takiej możliwości, ale wystarczy kliknąć na avatar użytkownika Loniu

Zamknij kod w funkcji

function koloroweNicki() {
  $('.group').each(function() {
    var group = $(this);
    var nick = group.text();
    var length = Math.round(nick.length/2);
    var colors = '<span class="red">'+ nick.slice(0, length) +'</span><span class="black">'+ nick.slice(length) +'</span>';
    group.html(colors);
  });
}

a następnie ją wywołaj w pliku od shoutboxa w momencie wysłania wiadomości. Wyszukaj sobie komentarz:

// insert new shouts

No i nic, dodałem to pod pierwszym komentarzem, potem również pod drugim i nic.

  dvz_shoutbox.js (Rozmiar: 17,97 KB / Pobrań: 136)

Lepiej w sumie wywołać funkcję podczas parsowania wiadomości. Uruchomi się wtedy ona podczas wyświetlania każdej wiadomości. Jeśli jednak wolisz wywoływać funkcję jedynie po napisaniu nowej wiadomości to znajdź:

} else {
                            $('#shoutbox .data').prepend( $(data.html).hide().fadeIn() );
                        }

zamień na:

} else {
    $('#shoutbox .data').prepend( $(data.html).hide().fadeIn() );
    koloroweNicki();
}

 
W załączniku znajdziesz pierwsze rozwiązanie.

  dvz_shoutbox.js (Rozmiar: 17,55 KB / Pobrań: 132)      

Btw komentarz nie oznaczał gdzie dokładnie masz to dodać, a jedynie miejsce od którego masz analizować kod.
Ważne: kod z załącznika jest dla najnowszej wersji dvz shoutbox na chwilę obecną, tj. 2.3.2.