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

[Dragosvr92 Radulescu Dragos]

Thanks

[Sniper_E]

hi everybody, i need help with my chatbox, the height is extremrly long how can I fix that? senkiu culiao

This is the prosilver/template/chat_body.html template that I use clowcaca:

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="chat">
                  <b class="time">{chatrow.TIME}</b><br />
                  <!-- IF U_ACP or U_MCP -->
                  <ul class="profile-icons del-icon">
                     <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 -->
                  {L_POST_BY_AUTHOR} {chatrow.USERNAME_FULL} &raquo; <span class="message">{chatrow.MESSAGE}</span>
               </div>
            <span class="corners-bottom"><span></span></span></div>
         </div>
      <!-- END chatrow -->--!--{LAST_ID}
      <!-- IF S_WHOISONLINE -->--!--
      <!-- BEGIN whoisrow -->
         <div class="post <!-- IF whoisrow.S_ROW_COUNT is odd -->bg2<!-- ELSE -->bg1<!-- ENDIF -->" style="margin:4px 0">
            <div class="inner"><span class="corners-top"><span></span></span>
               <div class="user nowrap"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
            <span class="corners-bottom"><span></span></span></div>
         </div>
      <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
      <p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF -->&nbsp;</p>
      <!-- IF S_USER_LOGGED_IN --><p>&nbsp;{CURRENT_TIME}</p><!-- ENDIF -->
   <!-- ENDIF -->
   <script type="text/javascript">
   // <![CDATA[
   var form_name = 'postform';
   var text_name = 'message';
   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.postform.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.postform.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>

   <!-- IF not S_USER_LOGGED_IN and not S_CHAT -->
   <br />
   <!-- ENDIF -->

   <div class="forabg">
      <div class="inner"><span class="corners-top"><span></span></span>
         <div class="header">
            <div style="text-align: center">
               <div id="chat_icon">
                  <h4 class="icon-chat">&nbsp;{SITENAME} <!-- IF not S_CHAT --><a href="{U_CHAT}">{L_CHAT_EXPLAIN}</a><!-- ELSE -->{L_CHAT_EXPLAIN}<!-- ENDIF --></h4>
               </div>
               <!-- IF S_USER_LOGGED_IN -->
               <form name="postform" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)">
                  <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>
               <!-- ELSE -->
               <b style="color: white;">{L_GUEST_MESSAGE}</b>
               <!-- ENDIF -->
            </div>
         </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<!-- IF S_CHAT --> main<!-- ENDIF -->">
            <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="chat">
                        <b class="time">{chatrow.TIME}</b><br />
                        <!-- IF U_ACP or U_MCP -->
                           <ul class="profile-icons del-icon">
                              <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 -->
                        {L_POST_BY_AUTHOR} {chatrow.USERNAME_FULL} &raquo; <span class="message">{chatrow.MESSAGE}</span>
                     </div>
                  <span class="corners-bottom"><span></span></span></div>
               </div>
            <!-- END chatrow -->
            </div>
         </div>
         <strong class="icon-members list">&nbsp;{L_ONLINE_LIST}</strong><br />
         <div class="onlinelist<!-- IF S_CHAT --> main<!-- ENDIF -->">
            <div class="users" id="whois_online">
            <!-- BEGIN whoisrow -->
               <div class="post <!-- IF whoisrow.S_ROW_COUNT is odd -->bg2<!-- ELSE -->bg1<!-- ENDIF -->" style="margin:4px 0">
                  <div class="inner"><span class="corners-top"><span></span></span>
                     <div class="user nowrap">
                        <img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}
                     </div>
                  <span class="corners-bottom"><span></span></span></div>
               </div>
            <!-- END whoisrow -->
            </div>
         </div>
      <span class="corners-bottom"><span></span></span></div>
   </div>

   <div class="navbar">
      <div class="inner"><span class="corners-top"><span></span></span>
         <div class="chatform" style="tex-align: center;padding-bottom: 4px">
            <span class="icon-chat list">&nbsp;{L_DETAILS}</span> <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" alt="" /> <strong>{L_UPDATES} <span id="update_seconds">&nbsp;{DELAY}</span> {L_UNIT}</strong>
         </div>
      <span class="corners-bottom"><span></span></span></div>
   </div>

   <!-- IF S_CHAT -->
      <!-- IF S_DISPLAY_ONLINE_LIST -->
         <h3><!-- IF U_VIEWONLINE --><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a><!-- ELSE -->{L_WHO_IS_ONLINE}<!-- ENDIF --></h3>
         <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{L_ONLINE} {LOGGED_IN_USER_LIST}</p>
      <!-- ENDIF -->
      <!-- INCLUDE overall_footer.html -->
   <!-- ENDIF -->
<!-- ENDIF -->

And this is the prosilver/theme/chat.css that I use for it:

Code: Select all

#act_indicator {
   visibility: hidden;
   margin-bottom: -4px;
}

#chat {
   width: 100%;
   text-align: left;
}

#chat_icon {
   float: left;
   color: white;
}

.shouts {
   width: 82%;
   height: 200px;
   overflow: auto;
   float: left;
}

.postprofile {
   min-height: 5px !important;
}

.chatform {
   width: 90%;
   text-align: center;
}

.list {
   margin-left: 16px;
   padding-top: 2px;
   height: 16px;
}

.onlinelist {
   width: 18%;
   height: 200px;
   overflow: auto;
}

.main {
   height: 400px;
}

.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;
}

.del-icon {
   margin-top: -10px;
}

.chatinput {
   width: 50% !important;
}

.message {
   font-size: 1.2em;
   color: #222222;
}

.time {
   font-size: 0.9em;
   color: #333333;
}

.online_img {
   vertical-align: middle;
   margin-top: -4px;
}

[clowcaca Clowen]

I copied your files exactly as they are but I still have the problem of the height of the whole chat.

Thank you

[Sniper_E]

How about a screen shot so I can see what you are seeing. Show me what you mean...
Did you Refresh your templates and theme in the ACP after making your changes?

[clowcaca Clowen]

Please take a look at my chat ---> http://antrollio.comxa.com

Thank you for your help

[Limbless]

Looking to have my chat box always on top of the page when browsing the forums 1!
so the chat is always available to use when browsing .

[Limbless]

Ok had a go at finding how to do it myself and now i gave myself this problem as seen in the picture.
this chat box don't work and still need to have the chat box open on top of site where ever you are in the forum.
any hint would be helpfull

[Sniper_E]

@ clowcaca, we can not see your chat as a guest. I didn't see the chat on your site at all.
You have to use that template I gave you in the template/ directory
and you have to use that chat.css file with it in the theme/ directory
and you have to go to ACP / Styles / Refresh Templates and Theme in your style.

@ Limbless, put that back the way you had it when it was working for you.
If it messes up on you then undo what you did.
If you want the chat in all of your pages you have to do another edit. Not sure what it is.
I know you add include($phpbb_root_path . 'shout.' . $phpEx); in the index.php
Maybe you have to add that in the viewforum.php for it to show in the forums.
Maybe you have to add that in the viewtopic.php for it to show in the topic pages.
Handyman has shown how to do that but I forget what is was. I use it in the index page only.

[Limbless]

thanks for the tip Sniper_E

[PapillonKisses]

Hey!

I'm sorry to just jump in here but I think I'm having a similar problem to clowcaca. I just set up AJAX chat on my forum today, the chat shows up at the bottom of my forum for now (planning on changing that once I can get some things figured out).

I wanted to use the chat kind of like a shoutbox at the top of the forum. But I'm having a problem with the size of the chat...it's not scrolling. Meaning that when anyone chats it's just making my main forum page larger and larger instead of being in a neat little scrolling box of it's own.

Sorry if I'm not explaining it well, but this is what my chat area currently looks like...



Does anyone know what I can do to fix that? I want the chat to have it's own fixed amount of space on my main page & then have a scroll bar if anyone wants to scroll down to read past posts.

I made my chat_body.html and chat.css the same as the ones Sniper_E posted & refreshed everything but this is still what my chat area looks like.