Code shoutbox gần giống gek không load

:apl:

Code này sẻ không có chức năng up top nhé ^^ thêm html

HTML5

<link rel="stylesheet" href="http://gek.wap.mu/files/979047/index.v1.css" type="text/css">

ô 1 chat bot thêm

TWIG

</div>{%if 'a'=='a'%}<style>
   .sc_a1, .boxmain, .statsd, form .center, .left {
    border-radius: 5px;
    overflow: hidden;
}
  .sc_a1, .box, .left, form[action*='id=ch_topic&f='], .divider, form .center {
    background: #fff;
    margin: 0 6px 6px;
    border-color: #ccced3 #c4c6ca #b4b6ba;
    border-style: solid;
    border-width: 1px;
}
.message, .list li {
    word-wrap: break-word;
    overflow: hidden;
}
.sc_a1 .status {
    padding: 6px;
}
  img.ava30 {
    width: 30px;
}
img.ava2 {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
img.ava {
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fl {
    float: left;
}
.ml {
    margin-left: 5px;
}
.fl {
    float: left;
}
.b {
    font-weight: bold;
}
a {
    color: #3b5998;
    text-decoration: none;
}
.cl:before, .wf:after, #wrapper:after, #wrapper:before, .bottom-head:after {
    content: '';
    line-height: 0;
    clear: both;
    display: table;
}
.user_message {
    padding: 4px 0;
}
.composter, .p8 {
    padding: 8px;
    background: #f6f7f8;
}
.bt, .composter {
    border-top: 1px solid rgba(0, 0, 0, .101);
}
.composter a {
    padding: 8px;
    position: relative;
    cursor:pointer;
}
.composter .cmt:hover{
    border-bottom: 4px solid rgba(15,120,250,1);
}
span[class*="l-"] {
height: 4px; width: 4px;
background: #000;
display: inline-block;
margin: 12px 2px;
 
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
 
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
 
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
 
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
 
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
 
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
 
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
.i-post-status{background:transparent url(/files/116849/post-status.png) no-repeat;width:16px;height:16px;position:absolute;top:-1px;left:0;    margin-left: 5px;}
.i-upload-photo{background:transparent url(/files/116849/upload-photo.png) no-repeat;width:16px;height:16px;position:absolute;top:-1px;left:0;    margin-left: 5px;}
.sc_a1,.boxmain,.statsd,form .center,.left{border-radius:5px;overflow:hidden}
.title{margin-bottom:5px}
.statsd{margin:5px;background:#F6F7F8}
.boxmain{border:1px solid #d3d6db;background:#fff;margin:5px;padding-bottom:5px}
.boxmain .titlea,.statsd .titlea{background:#F6F7F8;padding:10px 5px 10px 5px;color:#6A7480;font-weight:bold;border-bottom:1px solid #e1e1e1;height:14px;text-align:left}
.sform{padding:0;}
.sform #post-area{padding:5px;}
    .sform textarea{resize:none;border:0px;outline:0px;}
.sform .titlea span[id]{position:relative;padding-left:22px;display:inline-block}
.sform .titlea span.active{color:#333}
.sform .titlea span.active .artop{background:transparent url(/files/116849/artop.png) no-repeat 10% 100%;height:6px;width:11px;background-size:auto;position:absolute;left:50%;top:19px;z-index:1;margin-left:-3px;display:block}
#post-options{padding:0px 10px;vertical-align:middle;background:#F6F7F8;border-top:1px solid #e9eaed}
    </style>
<script>
  $(function(){
    var ref='main.php?id=ch_topic_h&uid=217217';
    function shoutbox(){
    $('.cmt').click(function(){
    data=$(this).attr('data-cmt-id');
      $('#comments_'+data).html('<div class="composter s" style="display: none;" id="stats_'+data+'"><div class="mad" id="content" ><div class="sc_a1" style="text-align:center"><img src="files/979047/loading_sms.gif"></div></div></div><div class="composter s"><form action="" method="post" id="comment" data-id="'+data+'"><input type="text" style="width:50%" name="text" class="cmt_text_'+data+'" placeholder="Viết bình luận..." autocomplete="off" value=""><input type="submit" class="btn-small ml" value="Bình luận"></form></div>');
      chapnhan();
      return false;
    });
    }
    $('#post_status').submit(function(){
      $.post(ref,{text:$('#chat_txt').val()},function(){
      load();
        $('#chat_txt').val('');
      });
      return false;
    });
    function load(){
      $('.message_list').load(location.href+' .sc_a1',function(){
      shoutbox();
      });
    }
    shoutbox();
    function chapnhan(){
      $('#comment').submit(function(){
        var data=$(this).attr('data-id');
        $('#stats_'+data).show();
        $.post(ref,{text:data+' '+$('.cmt_text_'+data).val()},function(){
        $('#stats_'+data).hide();
          if($('#cmt_list_'+data).find('.composter').length>=5){
            $('#cmt_list_'+data).find('.composter:first-child').remove();
          }
          $('#cmt_list_'+data).append('<div class="composter s"><a href="main.php?f=1" class="b">[nick]:</a>'+$('.cmt_text_'+data).val()+'<br><br><span class="ml">(Vừa xong)</span></div>');
          $('.cmt_text_'+data).val('');
        });
        return false;
      });
    }
 
  })
</script>
 
 
 
 
<div id="haha"></div> <div class="boxmain s sform"><div class="titlea"><a href="#" title="Trạng thái"><span id="update-status" class="active"><i class="i-post-status"></i> Trạng thái  <i class="artop active"></i> </span></a><a href="?fnc=up" title="Thêm ảnh" class="fancybox"><span id="upload-photo"><i class="i-upload-photo"></i> Thêm ảnh <i class="artop"></i> </span></a><a href="?id=online" title="Online 1"><span id="online"><i class="i-upload-photo"></i>Online [online]<i class="artop"></i></span></a></div><form id="post_status" action="main.php?id=ch_topic_h&uid=217217&back_url=%2Fmain.php{%if api.r.get('f')%}%3Ff%3D{{api.r.get('f')}}{%endif%}" method="post" data-time="20160126092029">
  <div id="post-area" class><textarea style="width:98%" name="text" placeholder="Nhập trạng thái" id="chat_txt"></textarea></div>
  <div id="post-options" class="wf" align="right"><input type="submit" value="Đăng"></div>
  </form></div>
 
 
 
<div class="message_list">
{%set m=message_list|split('</CODE_by_hUy/>')%}
{%set uid,msg,msd,sc='','','',0%}
{%for i in 1..m|length-1%}
{%set uid=m[i-1]|split('#uid#')[1]|split('#/uid#')[0]%}
{%set msg=m[i-1]|split('#msg#')[1]|split('#/msg#')[0]%}
{%set msd=m[i-1]|split('#msd#')[1]|split('#/msd#')[0]%}
{%if msg matches '{^([0-9]{12} )}' %}
{% else %}
  {%set sc=sc+1%}
  {%if api.r.get('page')==null%}
  {%set min=1%}
  {%set max=10%}
  {%else%}
  {%set min=api.r.get('page')*10-10%}
  {%set max=api.r.get('page')*10%}
  {%endif%}
  {%if min<=sc and max>sc%}
<div class="sc_a1" stt="0" page="2">
<div class="message">
<div class="status">
 <div class="wf">
      <img src="{{api.u.get(uid).profilephotourl}}" class="ava ava2 ava30 fl">
      <div class="fl ml">
        <div class="poster b" data-uid="23993904">
          <a href="user_info.php?uid={{uid}}" title="[nick]">{{api.u.get(uid).nick}}</a>
          <span class="s"> - {%if api.u.get(uid).level==127%}<font color="#ff0000">Frounder</font>{%else%}Member{%endif%}</span></div>
        <div class="time s">
          {{msd}}</div></div><div class="cl"></div>
<div class="user_message s">
<div class="message_topic">
  {{msg|raw}}
</div>
</div>
</div>
 
  </div><div class="composter s b"><!--a href="#head" --><a class="cmt" data-cmt-id="{{msd|date('ymdHis')}}" href="main.php?{%if api.r.get('f')%}f={{api.r.get('f')}}&{%endif%}comment={{msd|date('ymdHis')}}" _onclick="document.forms[0].text.value='{{msd|date('ymdHis')}}'">Bình luận</a><!--/a--></div><div id="comments_{{msd|date('ymdHis')}}"></div></div>
 
  <div id="cmt_list_{{msd|date('ymdHis')}}">
    {%set juid,jmsg,jmsd,john='','','',0%}
{%for j in m|length-1..1%}
{%set juid=m[j-1]|split('#uid#')[1]|split('#/uid#')[0]%}
{%set jmsg=m[j-1]|split('#msg#')[1]|split('#/msg#')[0]%}
{%set jmsd=m[j-1]|split('#msd#')[1]|split('#/msd#')[0]%}
    {%if jmsg matches '{^([0-9]{12} )}' %}
    {%if jmsg|slice(0,12)==msd|date('ymdHis') %}
    {%set john=john+1%}
    {%if john<=5%}
   <div class="composter s">
      <a href="user_info.php?uid={{juid}}" class="b">{{api.u.get(juid).nick}}</a>
      {{jmsg|slice(13,jmsg|length-13)|raw}}
      <br><br>
        <span class="ml">{{jmsd|date('H:i, d/m/y')}}</span></div>
        {%endif%}
        {%endif%}
    {%endif%}
   {%endfor%}
  </div>
<div id="comments_{{msd|date('ymdHis')}}"></div>
</div></div>
 
{%endif%}
{%endif%}
{%endfor%}
</div>
{%endif%}{{paging_def}}

Ô 2:

TWIG

#uid#{{nick|slice(27,8)}}#/uid##msg#{{message}}#/msg##msd# {{message_date}} #/msd#</CODE_by_hUypyy/>

nhớ thay uid shoutbox ở phần js nhé thân!!thấy hay cho like ^^

code buy: huypy

Code này fix chỉ chat đc 1 cái chưa