Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Board Index » Forumotion »  [Read Only] Questions & Problems »[Solved] chatbox like this

Foto

[Solved] chatbox like this

by ,


View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Zildjian

Zildjian
Punbb Junior
Punbb Junior
2013-09-23, 16:59
how to create a chatbox like this
[Solved] chatbox like this 210

Powered by PunBB
Thanks
Currently 0 users have thanked Zildjian for this post:

2
Offline

  Shadow

Shadow
Administrator
Administrator
2013-09-23, 18:17
Create new HTML page with this

Code:
[panda=html]<!--
// Copyright? (c) 2013 JScript <jscriptbrasil at live.com>
// This work is free. You can redistribute it and/or modify it
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>Chatbox</title>
      <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
      <meta content="text/javascript" http-equiv="content-script-type"/>
      <meta content="text/css" http-equiv="content-style-type"/>
      <link href="http://illiweb.com/fa/favicon/write.ico" type="image/x-icon" rel="shortcut icon"/>
      <link type="text/css" href="https://googledrive.com/host/0BywKunb3ieyDdVlWcUlScmk2SlE/ShoutBox.css" rel="stylesheet"/>       
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <!--<script type="text/javascript" src="http://illiweb.com/rs3/54/frm/lang/pt.js"></script>-->

        <script type="text/javascript" src="https://googledrive.com/host/0BywKunb3ieyDdVlWcUlScmk2SlE/lz-string-1.3.0-rc1.js"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B1KYB697LuNxVUlqTDVLTXNHSkU"></script>

        <!-- Include the editors JS
        <link rel="stylesheet" href="https://googledrive.com/host/0BywKunb3ieyDdjQzQW43bUtndnM/office-toolbar.min.css" type="text/css" media="all" />
        <script type="text/javascript" src="https://googledrive.com/host/0BywKunb3ieyDYTRDTVAxX1N2MGM/jquery.sceditor.bbcode.min.js"></script>
        <script type="text/javascript" src="https://googledrive.com/host/0BywKunb3ieyDR2FvbUdPLVczTjQ/pt-BR.js"></scrip>
        -->
      <script type="text/javascript">
        //<![CDATA[
        var params = '?archives=1';
        var smilies_sid = '';
        var url_chat = '/chatbox/index.forum';
           
            function updateParent() {
                parent.updateIframeSize('iframe_shoutbox', $('html').height());
            }           
            /*
            $(function() {
                $("#editarea").sceditor({
                    plugins: "bbcode",
                    toolbar: "source,removeformat,maximize|font,size,color,emoticon|cut,copy,paste,pastetext|bold,italic,underline,strike,subscript,superscript|code,quote,image,email,link,unlink|left,center,right,justify",
                    fonts: "Arial,Arial Black,Courier New,Sans-serif,Times New Roman,Trebuchet MS",
                    locale: "pt",
                    emoticonsRoot: "https://googledrive.com/host/0BywKunb3ieyDeXo0RF93Z1BXd3M/",
                    resizeEnabled: false,
                    autofocus: true
                });
            });*/
        //]]>
      </script>



      <style type="text/css">
        * {margin: 0;padding: 0;}
        html, body {overflow: hidden;}
        body {padding: 0;margin: 0;background-color: #fbfbfb; font-family: helvetica,arial,sans-serif !important}
        .fontbutton {border:0;}
            #ajax_loading {
                background: -moz-linear-gradient(center top , #95C715 0%, #7BA60D 100%) repeat scroll 0 0 transparent;
                border: 1px solid #7BA60D;
                border-radius: 0 0 5px 5px;
                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
                color: #FFFFFF;
                left: 46%;
                padding: 5px 0 8px;
                position: fixed;
                text-align: center;
                top: 0;
                width: 8%;
                z-index: 10000;
            }           
.punbbtop button {
display: none !important;
}
      </style>
  </head>
  <body vlink="" text="#333333" link="#225985" bgcolor="#fbfbfb" onload="parent.updateIframeSize('iframe_shoutbox', $('html').height());">
      <div id="ajax_loading" style="display: none;"><img alt="Loading..." src="http://i69.servimg.com/u/f69/18/17/62/92/ajax_l10.gif"/></div>
      <div id="shoutbox-temp-msgs" style="display: none;"></div>
        <div id="shoutbox-temp-imgs" style="display: none;"></div>
      <div id="category_shoutbox" class="category_block block_wrap" style="min-height: 300px; min-width: 720px; width: 100%;">
        <h3 class="maintitle">
            <a title="View Main Shoutbox" href="/forum" target="_top">Shoutbox </a>
        </h3>
        <div role="tablist" class="cke_dialog_tabs" id="cke_dialog_tabs_200">
            <a role="tab" hidefocus="true" tabindex="-1" id="cke_general_207" title="General" cke_first="" class="cke_dialog_tab" style="-moz-user-select: none;">
            General
            </a>
        </div>
        <div class="ipsBox table_wrap">
            <div class="ipsBox_container">
              <table class="ipb_table shoutbox_table" style="height: 230px; min-height: 230px;">
                  <tbody>
                    <tr class="row2" id="shoutbox-announcement-row">
                        <td valign="middle" colspan="2" class="altrow">
                          <div class="message" id="shoutbox-announcement-text">
              No spamming and offensive words. <strong class="bbc">Support is not allowed in Shoutbox!</strong>
                          </div>
                        </td>
                    </tr>
                    <tr class="row1">
                        <td valign="top" colspan="2" class="altrow">
                          <div id="shoutbox-shouts" style="overflow: auto; overflow-x: hidden; left: 0px; top: 0px; height: 169px; min-height: 128px;">
                              <p id="shoutbox-inactive-prompt" style="display: none; height: 126px;" class="altrow short">
                                <br>We've noticed that you've been inactive for over 10 minutes.<br>
                              The shoutbox has stopped running due to your inactivity.<br>
                                  If you are back again, please click the button below <u>I'm back!</u>.
                                <br><br>
                                <input type="button" onclick="I_am_back();" class="input_submit" value="I am Back!">
                              </p>
                              <p id="shoutbox-service" style="display: none; height: 126px;" class="altrow short">
                                <br><br>Our shoutbox is currently undergoing maintenance, we appreciate your understanding!<br>
                                The shoutbox has stopped running due to technical reasons.<br>
                                We will be back later. Thank you for understanding!
                                <br>
                              </p>
                              <table id="shoutbox-shouts-table" style="display: ;">
                                <div id="chatbox_members" style="display: none;" increment="10" pageincrement="144" maxpos="460" curpos="0"></div>
                                <tbody id="chatbox_general" class="chat_toggle" style="display: ;" curpos="188" maxpos="325" pageincrement="0" increment="10">
                                    <!-- General ChatBox content -->
                                </tbody>
                              </table>
                          </div>
                          <div id="shouts-global-resizer" title="Clique para redimensionar o ShoutBox!" onmousedown="resizeElement();"></div>
                          <div style="display: none;" class="message error block_wrap" id="shoutbox-inline-error-glb"></div>
                        </td>
                    </tr>
                    <!-- Buttons -->
                    <tr class="row1">
                        <td valign="top" colspan="2" class="altrow">
                          <form onsubmit="submitmsg('?archives=1');return false;" method="post" action="" name="post">
                              <div id="chatbox_messenger_form" style="display: ">
                                <div align="center" onclick="document.post.message.focus();timer_count=0;">
                                    <input type="text" id="message" name="message" size="70" maxlength="1024" class="input_text" autocomplete="off" style="width: 98%; margin-bottom: 10px;" onkeydown="number_of_refresh=0;timer_count=0;" />
                                    <input type="submit" class="input_submit" value="Send Shout" id="submit_button" name="submit_button"/>
                                    <input type="button" class="input_submit alt" value="Clear" id="shoutbox-clear-button" onclick="document.getElementById('message').value = '';">
                                    <input type="button" class="input_submit alt" value="Refresh" id="shoutbox-refresh-button" style="" onclick="refresh_chatbox('?archives=1');"/>
                                </div>
                              </div>
                          </form>
                        </td>
                    </tr>
                  </tbody>
              </table>
            </div>
        </div>
         
      </div>

        <div class="popupWrapper" id="editShout_popup" style="display: none; top: 50%; left: 50%; width: 650px; height: 245px; margin:-135px 0 0 -325px; position: absolute;">
        <div class="popupInner" id="editShout_inner" style="width: 650px; height: 245px;">
            <h3>Edit Shout</h3>
            <div class="message error block_wrap" id="shoutbox-inline-error-editShout" style="display:none;"></div>
            <div class="ipsPad">
                <span class="cke_wrapper cke_ltr" role="presentation">
                <form onsubmit="submitEditedMsg('?archives=1');return false;" method="post" action="" name="editpost">             
              <table border="0" cellpadding="0" cellspacing="0" class="cke_editor">
                  <tbody>
                    <tr>
                        <td class="cke_contents" style="height: 100px; padding: 0px ! important;">
                                    <textarea class="input_text" id="editarea" name="editarea"
                                        style="width: 98%; height: 89%; resize: none; outline: medium none; text-align: left;" onkeydown="number_of_refresh=0;timer_count=0;">
                                    </textarea>
                                </td>
                    </tr>
                            <!--
                    <tr>
                        <td class="cke_contents">
                                    <textarea class="input_text" id="editarea" name="editarea"
                                        style="width: 625px; height: 78px; resize: none; outline: medium none; text-align: left;" onkeydown="number_of_refresh=0;timer_count=0;">
                                    </textarea>
                                </td>
                    </tr>
                            -->
                  </tbody>
              </table>
              <div class="short ipsPad">
                        <div onclick="document.editpost.editarea.focus();timer_count=0;">
                            <input type="submit" class="input_submit" value="Send Shout" id="submit_button" name="submit_button"/>
                            <input type="button" class="input_submit alt" value="Clear" id="shoutbox-clear-button" onclick="document.getElementById('editarea').value = '';">
                            <input type="button" class="input_submit alt" value="Cancel" id="shoutbox-refresh-button" onclick="$('#editShout_popup').toggle();">
                        </div>
              </div>
                </form>
                </span>               
            </div>
        </div>
        <div class="popupClose clickable" id="editShout_close" onclick="$('#editShout_popup').toggle();"><img alt="x" src="http://i81.servimg.com/u/f81/17/45/75/97/cat_mi10.png"></div>
      </div>
       

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Welcome to Coding Support!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

  </body>
</html>
Now add iframe to index_body, announcement or whenever you want to chat appear
Code:
[panda=html] <iframe id="iframe_shoutbox" height="380px" width="100%" frameBorder="0" src="/h1-">Your browser does not support IFRAMEs</iframe>
/h1- change with your HTML number page.

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

3
Offline

  seka

seka
Punbb Rookie
Punbb Rookie
2013-09-23, 20:05
all this code is free??? can i edit it?? may it has copyrights?

Powered by PunBB
Currently 0 users have thanked seka for this post:

4
Offline

  Zyon

Zyon
Punbb Guru
Punbb Guru
2013-09-23, 23:14
seka wrote:all this code is free??? can i edit it?? may it has copyrights?
You must ask that all the time???
It is free code, you can edit that, It haven't copyrights.

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

5
Offline

  LegolasPunBB

LegolasPunBB
Pemanently Banned
Pemanently Banned
2013-09-24, 00:31
You should be honest and admit that this Shoutbox has copyrights, and it belongs to JScript. By the way, this version you gave, which is the first try of him, has some bugs, and doesn't have all the systems he implanted it. We are working now in put the memberlist that refreshs automatically right beside it.


You all can check it -promoting other sites is strictly forbidden.
Be humbler!

Powered by PunBB
Currently 0 users have thanked LegolasPunBB for this post:

6
Offline

  Shadow

Shadow
Administrator
Administrator
2013-09-24, 07:18
Ofcourse it has copyrights and if you read the code you can see it.

Code:
<!--
// Copyright? (c) 2013 JScript <jscriptbrasil at live.com>
// This work is free. You can redistribute it and/or modify it
-->

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  Zildjian

Zildjian
Punbb Junior
Punbb Junior
2013-09-24, 08:45
solved.

thanks nep

Powered by PunBB
Currently 0 users have thanked Zildjian for this post:

8
Offline

  seka

seka
Punbb Rookie
Punbb Rookie
2013-09-24, 13:36
so can i copy this code and put it in my forum??? or the creator of this code dont allow it?

watch the messages of shoutbox in image... hahaha lol! 

Powered by PunBB
Currently 0 users have thanked seka for this post:

9
Offline

  nanako

nanako
Punbb Guru
Punbb Guru
2013-09-24, 13:48
seka wrote:so can i copy this code and put it in my forum???
Yes you can.

[sucesso="Marked as Solved"]The question(s) in this topic have been answered and the owner has been able to solve the problem. Because of this, the topic has been marked as Solved.

If you have further questions, please open a new topic.[/sucesso]

Powered by PunBB
Currently 0 users have thanked nanako for this post:

10
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.