Re: [Add-on] AJAX Chat 2.0.0 Beta Styles

[BooUltimatum eugen vamanu]

Thx a lot Sniper_E , now is perfect, thx again your the best

[keggy]

I have installed AJAX Chat and all work great, the only problem during the installation was that I have to made mysql table myself but I have done this and the chat work fine.

Now I have the problem that my chat doesn't have my style and it's white and black. The functions are OK and you can post messages. Here the chat: http://www.androidmag.net/forum/chat.php

The style I use it's xandgreen. How can integrate this AJAX Chat with my style?

Here I link one zip with all the folder of my style: http://www.androidmag.net/android/ftp/xandgreen.zip

Can anyone help me?

Bye

Francesco

[kq76 Kieran]

I successfully prosilverized that chat-body for a board3portal side block if anyone wants it. Included in the attachment are chat_body.html files with and without who's online, a screenshot, a chat icon and a readme file. The code could be better, but it works and looks good so that's probably good enough for most.

[Obsidian]

That actually looks pretty good there.

[exorion]

Any one could help me?

My chat doesn't have any border or even any line between post



i'm using ca_halcyon template for my forum. Is there any way to edit my border line's color?

here is my chat_body.html

Spoiler:

Code: Select all

<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellspacing="1" width="100%">
            <tr>
               <td class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSEIF chatrow.CLASS is odd -->row1<!-- ENDIF -->" width="100%" align="left"><!-- IF U_ACP or U_MCP --> <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_post_delete.gif" /></a> <!-- ENDIF --> <b class="postauthor">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span> </td>
            </tr>
            </table>
         </div>
      <!-- END chatrow -->--!--{LAST_ID}
      <!-- IF S_WHOISONLINE -->--!--
         <!-- BEGIN whoisrow -->
            <div><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
         <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
   <!-- ENDIF -->
   <script type="text/javascript">
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 15000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;
         param += '&last_post=' + post_time;
         param += '&read_interval=' + read_interval;

         if (mode == 'add' && document.text.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.text.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }

   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('--!--');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];

               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 1000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 1000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }

   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }

   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }
      }
   }

   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   -->
   </script>
   <style type="text/css">
   <!--
      .box
      {
         width: 100%;
         margin-left: auto;
         margin-right: auto;
      }
      .shouts {
         width: 100%;
         height:300px;
         overflow:auto;
      }
      #chat {
         width: 99%;
         text-align:left;
      }
      #message {
         width: 65%;
      }
      #whois_online{
         vertical-align:text-top;
         text-align:left;
      }
      .online_img {
         vertical-align:middle;
      }
      #act_indicator {
         visibility:hidden;
      }
   -->
   </style>
   <div class="box">
      <br />
      <table class="tablebg" cellspacing="1" width="100%">
      <tr>
         <td class="cat" width="100%" height="28" nowrap="nowrap">
         <h4>{SITENAME} {L_CHAT_EXPLAIN}</h4>
         </td>
      </tr>
      </table>
      <table class="tablebg" cellspacing="1" width="100%">
      <tr>
         <th align="center" width="85%">
      <!-- IF S_USER_LOGGED_IN -->
         <form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">{L_MESSAGE}:
         <input type="text" tabindex="1" name="message" id="message" class="inputbox" size="28" />
         <input class="btnmain" type="submit" name="submit" value="{L_SUBMIT}" />
         </form>
      <!-- ENDIF -->
         </th>
         <th align="center" width="15%" nowrap="nowrap">
         {L_ONLINE_LIST}
         </th>
      </tr>
      <tr>
         <td class="row3" style="text-align:left;" height="220">
            <div class="shouts">
               <div id="chat">
               <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellspacing="1" width="100%">
                 
                     <tr>
                        <td class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSE -->row1<!-- ENDIF -->" align="left">
                     <!-- IF U_ACP or U_MCP -->
                        <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_post_delete.gif" /></a>
                     <!-- ENDIF -->
                        <b class="postauthor">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span>
                        </td>
                     </tr>
                     </table>
                  </div>
               <!-- END chatrow -->
               </div>
            </div>
         </td>
         <td class="row1" width="15%" nowrap="nowrap">
            <div class="shouts">
               <div id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}
                  </div>
               <!-- END whoisrow -->
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <td class="cat" colspan="2" width="100%" height="28">
         <div style="float: left;">&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_chat.png"> <a href="http://startrekguide.com/community/viewtopic.php?p=16364#p16364"><strong>AJAX Chat</strong></a>&nbsp;&copy; 2007 <strong style="color: #7B95B2;">StarTrek</strong><strong style="color: #D98303;">Guide</strong></div><div style="float: right;"><img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />&nbsp;&nbsp;<strong>{L_UPDATES} <span id="update_seconds"> {DELAY} </span> {L_UNIT}</strong> &nbsp;&nbsp;</div>
         </td>
      </tr>
      </table>
   </div>
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->


Plus, how can i show the delete post button in my chat room?

Thanks in advance

[kq76 Kieran]

I wanted separate chat_body.htmls for the portal and the chat.php page and I was able to do that successfully (I just had the portal link to a chat_body-portal.html). The only problem is now when you add a shout from in the portal it formats that last shout using the chat.php chat_body.html instead of the portal one. You refresh and it's alright though. This tells me that somewhere in the code it's telling it to use the default chat_body.html formatting right after a submission. I can't seem to figure out how to correct this though. Any ideas?

[NMI]

My AJAX Chat -
http://thedeificnmi.com/maelstrom/chat.php
Only changes I really made were to change the location of the "Message" box and change the height of the chat itself.

[relaxed4u Dragan]

Woody, post a snapshot of you chat to show what you are talking about. But to answer your two questions.... Yes and Yes.

Rich, to switch the sides: viewtopic.php?p=76184#p76184
And to have the chat at the top of your page.... Open index_body.html

FIND [ First line. ]

Code: Select all

<!-- INCLUDE overall_header.html -->

AFTER ADD

Code: Select all

<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<!-- INCLUDE chat_body.html -->
<!-- ENDIF -->

thanx

[Sniper_E]

Any one could help me?
My chat doesn't have any border or even any line between post
i'm using ca_halcyon template for my forum. Is there any way to edit my border line's color?

Plus, how can i show the delete post button in my chat room?
Thanks in advance

In your chat_body.html template, at the top and then again further down in the page after the ....

FIND

Code: Select all

         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellspacing="1" width="100%">

REPLACE WITH

Code: Select all

         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" style="text-align:left; border-width: 1px 1px 0 1px; border-style: solid; border-color: #407381;" cellpadding="6" cellspacing="0" width="100%">

You will have to change the border-color: #407381; to a color that looks good to you in your style.

Go to one of your posts in your forum and look at your delete icons in a post.
Right click on that delete icon and select view image.
Look in the address bar and see where your delete icon image is located.

In the chat_body.html template the delete icon is set to <img src="{T_IMAGESET_LANG_PATH}/icon_post_delete.gif" />
That would be located at styles/ca_halcyon/imageset/en/icon_post_delete.gif
Change that location in the template to match what you see in the address bar when you viewed your image.
Note: That edit will be in two places in your template also.

[Sniper_E]

I wanted separate chat_body.htmls for the portal and the chat.php page and I was able to do that successfully (I just had the portal link to a chat_body-portal.html). The only problem is now when you add a shout from in the portal it formats that last shout using the chat.php chat_body.html instead of the portal one. You refresh and it's alright though. This tells me that somewhere in the code it's telling it to use the default chat_body.html formatting right after a submission. I can't seem to figure out how to correct this though. Any ideas?

kq76, It sounds like you changed the codes in the template down in the page.
You have to change the codes in the top of the template also to match what you have further down in the template.
The new post is loading what is written in the top of the template and the refresh loads what is in the lower part of the template.
Make them read the same and that should correct your problem.