[FRAGE] Kleines Problem mit einer .js datei (Style)

[Fiesi]

Moin,

Wir haben einen Chat am laufen der sozusagen auf .js Basiert.

Einiges konnte ich an den Templates und CSS Datein soweit anpassen.

Ich Kleines Problem habe ich aber noch.

Der Chat sendet bei jeder Usernachricht das Datum - dann Nickname und die Nachricht.
Leider ist dieses in 3 unterschiedliche Bereiche wohl geteilt, das man die Nachrichten nicht "zusammen" per CSS anpassen kann.

Wir wollten das jede Nachticht komplett in einer Art "Sprechblase" ist - so wie ich es versucht habe - wird jeder Bereich leider in eine Sprechblase gepackt das blöd aussieht ^^

Ich Poste mal den Bereich aus der .js Datei.
Wäre schön wenn mir da jemand helfen könnte.

if (typeof(message)=='string' && message!='' || attachments && attachments.length>0) {
    if ((typeof(show_date)!='boolean' || show_date) && typeof(timestamp)=='number' && timestamp>0) {
      // Message timestamp
      date_span=tgt_doc.createElement('SPAN');
      date_span.id='date_span_'+(++timestampSpansIndex);
      timestampSpans.push(date_span.id);
      // Keep array small (100 ids max)
      if (timestampSpans.length>100) {
        timestampSpans.splice(0, timestampSpans.length-100);
      }
      date_span.innerHTML=' '+htmlspecialchars(date(dateFormat, timestamp))+' ';
      if (defaultMessageColor!='') {
        date_span.style.color='#FFFFFF';
      }
      $('chatroom_messages_contents', tgt_doc).appendChild(date_span);
      if (displayTimeStamp) {
        date_span.style.display='';
      } else {
        date_span.style.display='none';
      }
    }
    if (typeof(author)=='string' && author!='') {
      author_span=tgt_doc.createElement('SPAN');
      if (typeof(author_id)=='number') {
        author_span.innerHTML= '<a href=":" onclick="showUserOptionsBox('+author_id+', this.title); return false;" oncontextmenu="showUserOptionsBox('+author_id+'); return false;" title="'+coloredToPlain(author, true)+'">'+coloredToHTML(author)+'</a>';
      } else {
        author_span.innerHTML='<b>'+coloredToHTML(author)+'</b>';
      }
      if (typeof(privacy)=='number' && typeof(target_user_id)=='number' && target_user_id>0 && UserList.getRecord(target_user_id)) {
        if (privacy==1) {
          // "Whispered to" message
          author_span.innerHTML+=' '+getLng('whispered_message').split('[USER]').join('<a href=":" onclick="showUserOptionsBox('+target_user_id+', this.title); return false;" oncontextmenu="showUserOptionsBox('+target_user_id+'); return false;" title="'+coloredToPlain(UserList.getRecord(target_user_id).Nickname, true)+'">'
                                                                                      +coloredToHTML(UserList.getRecord(target_user_id).Nickname)
                                                                                      +'</a>'
                                                                                      );
        } else {
          // "Sayd to" message
          author_span.innerHTML+=' '+getLng('said_message').split('[USER]').join('<a href=":" onclick="showUserOptionsBox('+target_user_id+', this.title); return false;" oncontextmenu="showUserOptionsBox('+target_user_id+'); return false;" title="'+coloredToPlain(UserList.getRecord(target_user_id).Nickname, true)+'">'
                                                                                 +coloredToHTML(UserList.getRecord(target_user_id).Nickname)
                                                                                 +'</a>'
                                                                                 );
        }
      }
      if (defaultMessageColor!='') {
        author_span.style.color='#'+defaultMessageColor;
      }
      $('chatroom_messages_contents', tgt_doc).appendChild(author_span);
      sp=tgt_doc.createElement('SPAN');
      if (defaultMessageColor!='') {
        sp.style.color='#'+defaultMessageColor;
      }
      sp.innerHTML=': ';
      $('chatroom_messages_contents', tgt_doc).appendChild(sp);
      }
    msg_span=tgt_doc.createElement('SPANmsg');       //Die Chatnachricht die bis jetzt in einer Sprechblase ist leider ohne Datum und Nickname
    if (defaultMessageColor!='') {
      msg_span.style.color='#'+defaultMessageColor;
      }
    // Parse CSS attributes
    if (typeof(css_properties)=='string' && css_properties!='') {
      pair=null;
      css_attr_name='';
      css_attr_value='';
      css_array=css_properties.split(';');
      msg_span.style.setCssProperty=function(name, value) {
        eval('this.'+name+'=\''+value+'\'');
      };
      for (var i=0; i<css_array.length; i++) {
        css_array[i]=trimString(css_array[i]);
        if (css_array[i]!='' && -1!=css_array[i].indexOf(':')) {
          pair=css_array[i].split(':');
          if (pair.length==2) {
            pair[0]=trimString(pair[0]);
            pair[1]=trimString(pair[1]);
            if (pair[0]!='' && pair[1]!='') {
              css_attr_name=cssToJs(pair[0]);
              if (css_attr_name!='') {
                msg_span.style.setCssProperty(css_attr_name, pair[1]);
                // Apply fontSize for all spans
                if (css_attr_name=='fontSize') {
                  author_span.style.fontSize=pair[1];
                  if (typeof(sp)!='undefined' && sp) {
                    sp.style.fontSize=pair[1];
                  }
                  if (date_span && typeof(date_span.style)=='object' && date_span.style) {
                    date_span.style.fontSize=pair[1];
                  }
                }
              }
            }
          }
        }
      }
      msg_span.style.setCssProperty=null;
    }
    // Display attachments
    for (var i in attachments) {
      message+='  '
              +'<a href="'+formlink+'?s_id='+htmlspecialchars(s_id)+'&b_id='+urlencode(attachments[i]['binaryfile_id'])+'&filename='+urlencode(attachments[i]['filename'])+'" target="_blank" title="'+htmlspecialchars(getLng('attachment')+': '+attachments[i]['filename'])+'">'
              +'<img src="./pic/attachment_10x10.gif" title="'+htmlspecialchars(getLng('attachment'))+'" alt="'+htmlspecialchars(getLng('attachment'))+'" />'
              +htmlspecialchars(attachments[i]['filename'])
              +'</a>';
    }

Danke erstmal für die hilfe

 

[mikdoe]

* freigeschaltet *

 

[kkapsner]

Wo habt ihr denn diesen Chat her? Der ist ja grauenhaft... und ich bin mir ziemlich sicher, dass der eine massive Sicherheitslücke hat.

 

[Fiesi]

Wo habt ihr denn diesen Chat her? Der ist ja grauenhaft... und ich bin mir ziemlich sicher, dass der eine massive Sicherheitslücke hat.

ähm naja ^^ nennt sich pcpin - ist schon nen etwas älteres model

hatten bis vor kurzen noch den etchat am laufen aber massenweise probs damit

Das war jetzt auch nur nen kleiner ausschnitt aus der ganzen .js datei

Das wäre die ganze datei..
muss leider mal als link posten weil sonst zuviel hier - hoffe es ist ok

http://demo.chat.pcpin.com/js/chat_room.js

 

[kkapsner]

ist schon nen etwas älteres model

Das rechtfertigt keinen schlechten Code.

Also ich würde da keine Arbeit reinstecken, sondern mir etwas neues suchen oder bauen.

Zu deinem Problem: du brauchst im DOM hald einfach eine Node, die diese drei Elemenente beinhaltet. So wie ich das sehe, werden die einfach direkt in #chatroom_messages_contents eingehängt. Du könntest also am Anfang des Codes ein <span> erzeugen, dieses in #chatroom_messages_contents einhängen und date_span, author_span und msg_span in dieses neu eingeführte <span> einhängen. Dann solltest du dieses neue <span> per CSS formatieren könen.

Aber, wie gesagt, meiner Meinung nach lohnt sich der Aufwand nicht.