AJAX Chat 2.0 Beta bbcodes and smilies

[Jaymie1989]

This is more of a request.
When people message in the Chat Box just like on here they like to use the smilies and if you like me you forget the smilies codes.
So could there be a link on the top bar or something to open the smilies list so you can just click on the smiley you want without adding the image tags around it like, just like you do when creating a topic or a post like this

Any ideas my chat box looks like this.

I just would like to use a link to all smilies then the users be able to click on them and its inserts its self like it does when making a post.

Or can i just add the link to the chatbox body and it does it automatically ?

[Jaymie1989]

Well i have eliminated the problem of all the smiles showing. Of course as the friendly person that I am i will share this with all of you for $55 just send it to my pay pal

Na you all can have it for free.

Ok here is what you do. Open styles/templates/chat_body.html
Find:

Code: Select all

<!-- IF S_SMILIES_ALLOWED and .smiley -->
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->
<!-- ENDIF -->

Replace with:

Code: Select all

<!-- IF S_SMILIES_ALLOWED and .smiley -->
<a href="./posting.php?mode=smilies&amp;f=2" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;"><font color="#FFFFFF">View more smilies</font></a>
<!-- ENDIF -->

Now you have 2 options, You can change the text from "View More Smileys" To do this you need to
Find:

Code: Select all

View more smilies

on the lines i just gave you. Then change it to what ever

Second option is to change the color of the font.
I have wrapped the font that says "View More Smilies" as white, To change this find the <font></font> tags which show like this on the lines above (the code that you replaced it with)

Code: Select all

<font color="#FFFFFF">View more smilies</font>

and just change the #FFFFFF which a Hex Decimal font color, Here is a good place to get the font color View Here

When you click on a smilie it will also add the text to the chat box just like it does when making a post

So there it is.
Enjoy

[Jaymie1989]

There is a problem with the BBCodes when i click on them they show in the text area but when i submit any BBCodes it doesnt message anything just normal text does

[Sniper_E]

Maybe look at Handyman's first post: viewtopic.php?p=16364#p16364

See if doing the sql command for the Database change will take care of that.

[Jaymie1989]

Iv fixed that issue now, the next one i have is the delete button has moved.

[Sniper_E]

Looks like you need an updated copy of the prosilver chat_body.html - then add your smilies and bbcodes back in that new template.

[Jaymie1989]

Looks like you need an updated copy of the prosilver chat_body.html - then add your smilies and bbcodes back in that new template.

I done that but when i insert the bbcodes and smilies and remove the other delete button its just like this. I dont get it. Iv spent over 4 hours looking at the things and im lost

[Sniper_E]

No Jaymie, I can tell by the image you posted above, that is not an updated chat template you're using.
There is a white line on the left of your delete button. That is an old template.

Use this prosilver template and add your bbcodes and smilies in it.

Spoiler:

Code: Select all

<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
            <div class="inner"><span class="corners-top"><span></span></span>
               <div class="postbody">
                  <!-- IF U_ACP or U_MCP -->
                  <ul class="profile-icons">
                     <li class="delete-icon"><a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a></li>
                  </ul>
                  <!-- ENDIF -->
                  <div class="content">{chatrow.MESSAGE}</div></div>
                     <dl class="postprofile" id="profile{postrow.POST_ID}">
                        <dt>{chatrow.USERNAME_FULL}<br />{chatrow.TIME}</dt>
                     </dl>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div>
      <!-- END chatrow -->--!--{LAST_ID}
      <!-- IF S_WHOISONLINE -->--!--
         <!-- BEGIN whoisrow -->
            <div>
               <div class="inner">
                  <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
               </div>
            </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">
   <!--
      #act_indicator {
         visibility:hidden;
      }
      .shouts {
         width: 85%;
         height:315px;
         overflow:auto;
         float:left;
      }
      #chat {
         width: 100%;
         text-align:left;
      }
      .postprofile {
         min-height: 5px !important;
      }
      .chatform {
         width: 90%;
         text-align:center;
      }
      .onlinelist {
         width: 15%;
         overflow:auto;
         height:300px;
      }
      .users {
         width: 90%;
         text-align: left;
         margin-left:auto;
         margin-right:auto;
      }
      .user {
         width: 95%;
         font-size: 1.1em;
         font-family:Verdana, Arial, Helvetica, sans-serif;
      }
      #act_indicator {
         visibility: hidden;
      }
      .chatinput {width: 70% !important;}
      .online_img {
         vertical-align:middle;
      }
   -->
   </style>
      <div class="forabg">
         <div class="inner">
            <span class="corners-top"><span></span></span>
               <div class="header">
               <h4 style="color:white;">&nbsp;<img src="{T_THEME_PATH}/images/icon_chat.gif" alt="" />&nbsp;<!-- IF not S_CHAT -->{L_CHAT_LINK}<!-- ELSE -->{L_CHAT_EXPLAIN}<!-- ENDIF --></h4>
               </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
   <div align="left">
      <div class="inner">
         <span class="corners-top"><span></span></span>
         <div class="shouts">
            <div id="chat">
               <!-- BEGIN chatrow -->
                  <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <div class="postbody">
                           <!-- IF U_ACP or U_MCP -->
                              <ul class="profile-icons">
                                 <li class="delete-icon">
                                    <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                                 </li>
                              </ul>
                           <!-- ENDIF -->
                           <div class="content">{chatrow.MESSAGE}</div>
                        </div>
                        <dl class="postprofile" id="profile{postrow.POST_ID}">
                           <dt>{chatrow.USERNAME_FULL}<br /><b style="font-size: 0.9em;">{chatrow.TIME}</b></dt>

                        </dl>
                        <span class="corners-bottom"><span></span></span>
                     </div>
                  </div>
               <!-- END chatrow -->
            </div>
         </div>
         &nbsp; <strong>{L_ONLINE_LIST}:</strong><br /><br />
         <div class="onlinelist">
            <div class="users" id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <div class="inner">
                        <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
                     </div>
                  </div>
               <!-- END whoisrow -->
            </div>
         </div>
         <span class="corners-bottom"><span></span></span>
      </div>
   </div>
   <!-- IF S_USER_LOGGED_IN -->
      <div class="forabg">
         <div class="inner">
            <span class="corners-top"><span></span></span>
            <div class="chatform" align="center">
               <form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">
                  <strong style="color: white;">{L_MESSAGE}:</strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
                  <input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/><br />
               </form>
            </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
   <!-- ENDIF -->
<div align="center">
   <div class="navbar" style="width: 425px;">
      <div class="inner"><span class="corners-top"><span></span></span>

      <ul class="linklist">
         <li>{L_DETAILS} <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" /> <strong>{L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong></li>
      </ul>
      <span class="corners-bottom"><span></span></span></div>
   </div>
</div>
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_footer.html -->
   <!-- ENDIF -->
<!-- ENDIF -->

[Jaymie1989]

Ok thats better I just need to add the BBCodes and the smilies now.

I think this is one for the AJAX Chat support topic but im not sure as you gave me the code.
On the index page on the top of the chat box it shows { CHAT_LINK } but on the chat.php it shows Chat Center

[Jaymie1989]

I think this is one for the AJAX Chat support topic but im not sure as you gave me the code.
On the index page on the top of the chat box it shows { CHAT_LINK } but on the chat.php it shows Chat Center

Solved it, Its all working and coming together now thanks Ed your a star