Need help entering script/code to re-size chatbox.

OK so I found this topic about how to have the chabox on all pages of the forum but have one small problem I can't re-size the chatbox.
Original topic link- https://help.forumotion.com/t93320-how-can-i-put-my-chat-box-on-all-pages

Is it possible to use the re-size script when using the chatbox in the announcements? I am looking for this part in green on the image of the chatbox when activated in modules of admin cp.



This is what I entered in the announcements section.

Code:

      <center><table height="82" width="100%"><tr><td><center><iframe frameborder="0" width=100% height=300 src=http://www.mplf.forumotion.com/chatbox/index.forum?  marginheight=2 marginwidth=2 scrolling=auto allowtransparency=yes name=Chatbox ></iframe></center></td></tr></table></center>


This is in HTML for chatbox but missing when using the chatbox as announcement, how can I insert so users can re-size chatbox?

Code:

<img style="cursor:se-resize; float: right;" alt="" onmousedown="javascript:resizeElement(event, 'chatbox_top');" src="http://2img.net/i/fa/resize.gif">

Please help!

Are u talking about the popout chatbox? If u are then Have you tried clicking any part of the popout chatbox that is just the border?

No, not pop out. The link to the topic I included in original post is how to have chat on all pages. I need help with the JavaScript that controls the re-size function of the chatbox.

OK, does anyone have any suggestions? I am using phpbb3 as indicated under my profile and a link to the forum as well. I have entered the code in Admin>>General>>Messages & Email>>Announcements>>Modify as instructed according to link in original post above. Need users to be able to re-size the chatbox height.

Please help
Thanks

Anyone.....please help

the user will not be able to adjust the size.
they can drag it up or down a little bit but thats it.

But you can adjust the size of this to what you want of course if you go to small then it will cut some of it off, so you just have to fiddle with it until you get the desired size you like.

You just change the width and height to what you want.

Code:

<center><table height="82" width="100%"><tr><td><center><iframe frameborder="0" width=100% height=300 src=http://www.mplf.forumotion.com/chatbox/index.forum?  marginheight=2 marginwidth=2 scrolling=auto allowtransparency=yes name=Chatbox ></iframe></center></td></tr></table></center>

As far as the other thing you are asking i would have to test a few takings with it first.

kirk wrote:the user will not be able to adjust the size.
they can drag it up or down a little bit but thats it.

But you can adjust the size of this to what you want of course if you go to small then it will cut some of it off, so you just have to fiddle with it until you get the desired size you like.

You just change the width and height to what you want.

Code:

<center><table height="82" width="100%"><tr><td><center><iframe frameborder="0" width=100% height=300 src=http://www.mplf.forumotion.com/chatbox/index.forum?  marginheight=2 marginwidth=2 scrolling=auto allowtransparency=yes name=Chatbox ></iframe></center></td></tr></table></center>

As far as the other thing you are asking i would have to test a few takings with it first.

Thanks for the reply Kirk. As it stands right now users cannot resize (drag up and down) the chat on their end. When I put the code in the announcements the ability to resize is gone. All I am looking for is the ability to resize vertically as you can when the chat is normally activated in the Modules section of Admin CP. I have tried using CSS, resize: vertical; , but have been unable to make that work properly. Any ideas you may have would be greatly appreciated!
Thanks

i dont think it's anything that will have to do with the css, but am not certain.
i will go to your forum and test you cat code as well on my test board to see if we can get it working, you should still have the option to drag it down regardless of where the code is placed..

Since your useing phpbb3 thats about the only place.. unless you want to try it in your forums description.. it should fit in there..
But yeah let me test a few things first.

Ok, thanks Kirk, I do have a guest account set up if you want to just sign in with that if needed, ID "guestaccount" PW "!helpme1!" without quotes of course. I look forward to seeing what you come up with.

Nera

I just pm you.. i was able to find this, but i am not sure where it would go or if it needs to be adjusted in his css or not.

But you see he is trying to get it so his members can drag the box down.. and that is not working when he has the code on the page.. so hopefully it can be an easy fix with this somehow?

css if this is indeed it... lol

Code:

element.style {
    cursor: se-resize;
    float: right;

and this

Code:

<img style="cursor: se-resize; float: right;" alt="" onmousedown="javascript:resizeElement(event, 'chatbox_top');" src="http://2img.net/i/fa/resize.gif">

Ok, thanks Kirk for you attention on this. I will also try to play around with what you found and see if I can get it to work on my test board. Here is my CSS that is entered in the CSS Stylesheet in Admin CP that you requested.

Code:

#wrap {
           margin: 0px auto;
           background-color: #007fad;
           border: 3px solid #2029d4;
           padding: 1px 7px 1px 7px;
                -moz-border-radius-topleft: 30px;
                -moz-border-radius-topright: 30px;
                -moz-border-radius-bottomright: 15px;
                -moz-border-radius-bottomleft: 15px;
                -webkit-border-top-left-radius: 30px;
                -webkit-border-top-right-radius: 30px;
                -webkit-border-bottom-right-radius: 15px;
                -webkit-border-bottom-left-radius: 15px;
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
                border-bottom-right-radius: 15px;
                border-bottom-left-radius: 15px;
                -moz-box-shadow: 15px 15px 5px #3b3b3b;
                -webkit-box-shadow: 15px 15px 5px #3b3b3b;
                box-shadow: 15px 15px 5px #3b3b3b;
                background: -moz-linear-gradient( top, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #006587, #30CCF7, #006587, #007FAD, #007FAD, #007FAD, #007FAD,  #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD,#007FAD, #007FAD, #007FAD, #005C7B, #0FB4E2, #007FAD, #006587, #0FB4E2, #007FAD, #007FAD, #007FAD);
                background-image: -webkit-linear-gradient(top, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #006587, #30CCF7, #006587, #007FAD, #007FAD, #007FAD, #007FAD,  #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD, #007FAD,#007FAD, #007FAD, #007FAD, #005C7B, #0FB4E2, #007FAD, #006587, #0FB4E2, #007FAD, #007FAD, #007FAD);
               
           }
/* Tags--------------------------------------------------*/
.table-title, .table-title h2 {
           display: inline;
           font-size: 1.15em;
           color: #d7f01a;
           }
h3, .h3 {
           font-family: comic sans,Arial,Helvetica,sans-serif;
           text-transform: uppercase;
           border-bottom: 5px solid #0076b1;
           margin-bottom: 3px;
           padding-bottom: 2px;
           font-size: 1.05em;
           color: #d7f01a;
           margin-top: 10px;
                filter:alpha(opacity=60);
                opacity:0.6;
           }
/* Input-------------------------------------------------*/
.inputbox {
           background-color: #66d9cf;
           border: 1px solid #BCBCBC;
           color: #000000;
           padding: 2px;
           cursor: text;
                -moz-border-radius: 15px;             
                border-radius: 15px;
                -khtml-border-radius: 15px;     
           }
/*Header-----------------------------------------------*/
.headerbar {
                background-position: 50% 50%;
                -moz-border-radius-topleft: 45px 30px;
                -moz-border-radius-topright: 45px 30px;
                -moz-border-radius-bottomright: 30px;
                -moz-border-radius-bottomleft: 30px;
                border-top-left-radius: 45px 30px;
                border-top-right-radius: 45px 30px;
                border-bottom-right-radius: 30px;
                border-bottom-left-radius: 30px;
                -webkit-border-top-left-radius: 45px 30px;
                -webkit-border-top-right-radius: 45px 30px;
                -webkit-border-bottom-right-radius: 30px;
                -webkit-border-bottom-left-radius: 30px;
                }
#logo-desc{
           margin-top: 2px;               
                padding-bottom: 45px;
           text-align: center;
           }
/* Menu-------------------------------------------------*/
.navbar {
           clear: both;
           padding:0px 50px;                             
                border-radius: 25px;               
                -khtml-border-radius: 25px;               
                box-shadow: 0 0 3px 3px #3b3b3b;
                -moz-border-radius: 25px; 
                -moz-box-shadow: 0 0 3px 3px #3b3b3b;
                -webkit-border-radius: 25px;
                -webkit-box-shadow: 0 0 3px 3px#3b3b3b;
                background: -moz-linear-gradient( top, #3044A5, #30CCF7, #3044A5,  #3044A5,  #3044A5,  #3044A5, #30CCF7, #3044A5);
                background-image: -webkit-linear-gradient(top, #3044A5, #30CCF7, #3044A5, #3044A5, #3044A5, #3044A5, #30CCF7, #3044A5); 
                  }
#search-box #keywords {
           width: 200px;
                padding: 3px 3px 3px 5px;
           background-color: #66d9cf;
                -moz-border-radius: 10px 0 0 10px;
                border-radius: 10px 0 0 10px;
                -webkit-border-radius: 10px 0 0 10px;
                -khtml-border-radius: 10px 0 0 10px;
                -moz-box-shadow: 0 0 2px 2px #3b3b3b;
                -webkit-box-shadow: 0 0 2px 2px#3b3b3b;
                box-shadow: 0 0 2px 2px #3b3b3b; 
           }
#search-box input.button2 {
                padding: 2px 5px;
                -moz-border-radius: 0 15px 15px 0;
                border-radius: 0 15px 15px 0;             
                -webkit-border-radius: 0 15px 15px 0;
                -moz-box-shadow: 0 0 2px 2px #3b3b3b;
                -webkit-box-shadow: 0 0 2px 2px#3b3b3b;
                box-shadow: 0 0 2px 2px #3b3b3b;
           }
#fa_ticker_container {
                padding-bottom: 25px;
                position: relative !important;
                width: 100% !important;
                background-color: #a3a3a3;
                -moz-border-radius: 20px;
                border-radius: 20px; 
                -webkit-border-radius: 20px;
                -moz-box-shadow: 0 0 3px 3px #3b3b3b;
                -webkit-box-shadow: 0 0 3px 3px#3b3b3b;
                box-shadow: 0 0 3px 3px #3b3b3b;
                }
#fa_ticker {
                overflow: hidden !important;
                position: absolute !important;
                width: 100% !important;
                }
html #fa_ticker {
                left: 0;
                }
#fa_ticker > .fa_ticker_content {
                position: absolute !important;
               
                }
html #fa_ticker .fa_ticker_content {
              left: 0;
              position: absolute !important;
              }
/* Table-------------------------------------------------*/
.forabg {
           margin-bottom: 4px;
           clear: both;
           background-color: #333333;
           background-image: url('http://i43.servimg.com/u/f43/16/53/01/38/tableb12.png');
           background-repeat: repeat-x;
           background-position: 0 0;
           border: 2px solid #0076b1;
           padding: 0px 5px;
                -moz-border-radius: 10px 10px 0 0;
                border-radius: 10px 10px 0 0;
                -webkit-border-radius: 10px 10px 0 0;
           }
.forumbg {
           background-color: #333333;
           background-image: url('http://i43.servimg.com/u/f43/16/53/01/38/tableb12.png');
           background-repeat: repeat-x;
           background-position: 0 0;
           border: 2px solid #0076b1;
           padding: 0px 5px;
           margin-bottom: 4px;
           clear: both;
                -moz-border-radius: 10px 10px 0 0;
                border-radius: 10px 10px 0 0;
                -webkit-border-radius: 10px 10px 0 0;
           }
ul.forums {
           background-color: #a3a3a3;
           background-image: none;
           }
li.header dt, li.header dd {
           line-height: 1em;
           border-left-width: 0;
           margin: 2px 0 4px 0;
           color: #d7f01a;
           padding-top: 4px;
           padding-bottom: 4px;
           font-size: 1.3em;
           font-family: comic sans,Helvetica,sans-serif,comic sans,Arial,Helvetica,sans-serif;
           text-transform: uppercase;
           }
.hierarchy {
           display: inline;
           text-transform: none;
           border: none;
           font-size: 1.2em !important;
           }
/* Panel----------------------------------------------*/
.panel {
           margin-bottom: 4px;
           padding: 0px 10px;
           color: #000000;
                -moz-border-radius: 20px;             
                border-radius: 20px;
                -webkit-border-radius: 20px;
                -moz-box-shadow: 0 0 3px 3px #3b3b3b;
                -webkit-box-shadow: 0 0 3px 3px#3b3b3b;
                box-shadow: 0 0 3px 3px #3b3b3b;
           }
.row3{     
                padding-right: 30px;
                padding-top: 10px;
                padding-bottom: 10px;
                background: -moz-linear-gradient(
                top, #192C82, #30CCF7, #3044A5,  #3044A5, #3044A5, #3044A5, #3044A5,  #3044A5, #30CCF7,  #192C82);
/* Webkit (Chrome 11+) */
                background-image: -webkit-linear-gradient(top, #3044A5, #30CCF7, #3044A5, #3044A5, #3044A5, #3044A5, #30CCF7, #3044A5);             
                }
/* Post----------------------------------------------*/
.post {
           padding: 0 10px;
           margin-bottom: 4px;
           background-repeat: no-repeat;
           background-position: 100% 0;
                -moz-border-radius: 20px;             
                border-radius: 20px;
                -webkit-border-radius: 20px;     
           }
/* Panel----------------------------------------------*/
#cp-main .panel {
           background-color: #A3A3A3;   
                -moz-border-radius: 20px;
                border-radius: 20px; 
                -webkit-border-radius: 20px;
                padding: 4px;     
           }
/* Table----------------------------------------------*/
#cp-main table.table1 {
           margin-bottom: 1em;
           }
#cp-main table.table1 thead th {
           color: #D7F01A;
           font-weight: bold;
           border-bottom: 1px solid #333333;
           padding: 10px;
           }
/* Table----------------------------------------------*/
table.table1 thead th {
           font-weight: normal;
           text-transform: uppercase;
           color: #D7F01A;
           line-height: 1.3em;
           font-size: 1em;
           padding: 0 0 4px 3px;
           }
table.table1 tbody th {
           padding: 5px;
           border-bottom: 1px solid #000000;
           text-align: left;
           color: #D7F01A;
           background-color: #a3a3a3;
           }
/* Tabs----------------------------------------------*/
#tabs {
           line-height: normal;
           margin: 5px 0 -1px 20px;
   
/*min-width: 570px;
   */
                }
#tabs a {
           float: left;
           background: #a3a3a3 none no-repeat 0% -35px;
           margin: 0 1px 1px 0;
           padding: 5px 0 0 5px;
           text-decoration: none;
           position: relative;
           cursor: pointer;
                -moz-border-radius-topleft: 10px;
                -moz-border-radius-topright: 10px;
                border-top-right-radius: 10px;
                border-top-left-radius: 10px;
                -webkit-border-top-left-radius: 10px;
                -webkit-border-top-right-radius: 10px;
           }
/* Postbody (preview)---------------------------------------------------*/
.content blockquote {
             color: #d7f01a;
                  -moz-border-radius: 10px;             
                  border-radius: 10px; 
                -webkit-border-radius: 10px;
           }
/* Modules-------------------------------------------------*/
.module {
           margin-bottom: 4px;
           padding: 30px;
           background-color: #3044A5;          
                -moz-border-radius: 20px;
                border-radius: 20px; 
                -webkit-border-radius: 20px;
                -moz-box-shadow: 0 0 3px 3px #3b3b3b;
                -webkit-box-shadow: 0 0 3px 3px#3b3b3b;
                box-shadow: 0 0 3px 3px #3b3b3b;
                background: -moz-linear-gradient(
                top, #192C82, #30CCF7, #3044A5,  #3044A5, #3044A5, #3044A5, #3044A5,  #3044A5, #30CCF7,  #192C82);
/* Webkit (Chrome 11+) */
                background-image: -webkit-linear-gradient(top, #3044A5, #30CCF7, #3044A5, #3044A5, #3044A5, #3044A5, #30CCF7, #3044A5);                
           }
/* Chatbox-------------------------------------------------*/
#chatbox_header {
           height: 30px;
           background-color: #333333;
                -moz-border-radius: 15px 15px 0 0;
                border-radius: 15px 15px 0 0; 
                -webkit-border-radius: 15px 15px 0 0;
           }
.chatbox-title,.chatbox-title a.chat-title {
           color: #D7F01A !important;
           }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
           color: #D7F01A;
           }
#chatbox_members .member-title {
           text-align: center;
           padding: 0.5em 0.25em;
           background-image: none;
           font-size: 12px;
           background-color: #3044a6;
           color : #d7f01a;
           font-family: comic sans,Arial,Helvetica,sans-serif;
           }
#chatbox_footer {
                background-image: url('http://i43.servimg.com/u/f43/16/53/01/38/chatfo11.png');
                background-repeat: repeat-x;
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           padding: 6px;
                -moz-border-radius: 0 0 15px 15px;
                border-radius: 0 0 15px 15px; 
                -webkit-border-radius: 0 0 15px 15px;
           }
#chatbox_footer label {
           color: #D7F01A;
           }
#message,#submit_button{
           border-width: 1px;
                -moz-border-radius: 10px;
                border-radius: 10px; 
                -webkit-border-radius: 10px;
           }
.fontbutton {
           padding: 1px;
           cursor: pointer;
           text-align: left;
                -moz-border-radius: 5px;
                border-radius: 5px; 
                -webkit-border-radius: 5px;
           }


Hey Kirk, I tried that, it did not work, here's what I ended up with.

lol dude this is some wacky stuff.

try this take out your chat the way you have it now, then instead of addingthe code you have to announcements go in to your java script page and post this code.

I was messing with it threw dreamwever and seem to almost have it, but it's not dragging like it should...

so i have to try to figure out exactly what id i need from your page along with testing a few more ways i may be able to implement the css and perhaps an additional java to a java host.

It's confusing but will attempt a few more things.

and dreamweaver is shot out, i am still a bit new to the software but it deficient kicks butt so far so try this where i said just to see how it works ???

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="min-width" lang="en" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en">
<head>
<table width="200%" border="0" cellspacing="0" cellpadding="0" summary="chat">
  <caption></caption>
  <tr>
    <td></td>
  </tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="chatbox_top" style="height: 454px;">
<object id="frame_chatbox" width="100%" height="100%" type="text/html" scrolling="yes" data="/chatbox/index.forum?page=front&"></object>
</div>
<script type="text/javascript">
1insertChatBoxNew('chatbox_top', '/chatbox/index.forum?page=front&');
</script>
<img style="cursor: se-resize; float: right;" alt="" onmousedown="javascript:resizeElement(event, 'chatbox_top');" src="http://2img.net/i/fa/resize.gif">
<div class="clear"></div>
<span class="corners-bottom">
<span></span>
</span>
</div>
</div>
<br>
<style type="text/css" media="screen">
<!--
element.style {
    cursor: se-resize;
    float: right;
}
-->
</style>
</body>
</html>

kirk wrote:lol dude this is some wacky stuff.

aye captain

Well I did as you said but it did not work. I was able to see the preview before clicking submit on the Javascript page where I added the document you supplied. I still only have the chat in the default position at the top of the home page and no other pages and only if the chatbox is activated, also tried to de-activate then re-activate chatbox, show at top at bottom and do not display. This is all a learning experience for me, pretty new to all this stuff myself, but I am also trying on my own. Thank you again for all the effort Kirk, let me know if anything else comes to mind.

you can try code in the announcements where you had it before,

But it's a lil buggy... it dont seem to be dragging right.

i can give you a couple options on how to create a pop-out chat or do what a lot of others are doing now having the floating chat box at the bottom of the page that then opens

Ok, I will try that doc in the announcement section and see how it goes. I already have code for a pop out chat box, and on my test board I have the code for both options in announcement section, still have no resize function but they are both operational and on every page. It is strange though because the code for the pop out contains some javascript in it but if I try to enter any javascript in the chat fixed at the top of the page, it changes the appearance of the forum. Well back to W3schools and google for some more reading!

Thanks again for all your help with this Kirk, I will post back in a couple of days if I get this worked out.

Hey Kirk, I'm back, I am sure you may have been dreading seeing this topic again...lol.
I modified your document, more like hacked most of it out and placed it in announcements. It is almost there, the inner element <div class="fa_ticker_content"> drags fine for me but it does not resize the <div id="fa_ticker_container"> or the parent element, which is the <div id="fa_ticker_block">.

Here is the code from that part of the HTML doc of my test board.

Code:

<div id="fa_ticker_block" style="margin-top: 4px; display: block;">
<div class="module">
<div class="inner">
<span class="corners-top">
<div id="fa_ticker_container" style="height: 325px;">
<div id="fa_ticker" style="height: 325px;">
<div class="fa_ticker_content" style="width: 100%;">
<div style="position: absolute; white-space: nowrap; width: 100%; text-align: center;">
<div id="chatbox_top" style="height: 286px; padding-top: 10px;">
<object id="frame_chatbox" width="98%" height="100%" data="/chatbox/index.forum?page=front&" scrolling="yes" type="text/html"></object>
</div>
<script type="text/javascript">
1insertChatBoxNew('chatbox_top', '/chatbox/index.forum?page=front&');
</script>
<img src="http://2img.net/i/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_top');" alt="" style="cursor: s-resize; float: right; padding-right: 10px;">
<div class="clear"></div>

Here is exactly what I entered in announcements...

Code:

      <div id="chatbox_top" style="height: 300px; padding-top: 10px;">
    <object id="frame_chatbox" width="98%" height="100%" type="text/html" scrolling="yes" data="/chatbox/index.forum?page=front&"></object>
    </div>
    <script type="text/javascript">
    1insertChatBoxNew('chatbox_top', '/chatbox/index.forum?page=front&');
    </script>
    <img src="http://2img.net/i/fa/resize.gif"  style="cursor: s-resize; float: right; padding-right: 10px;"  onmousedown="javascript: resizeElement(event,  'chatbox_top');">
    <div class="clear"></div>

How can I bind those together to resize as one unit with javascript/jquery in the code placed in announcements. Or with some buble gum, tin foil, a toothpick and a strand of hair (obscure Magyver reference)
If you, or anyone else can help, test board address is www.mplf.forumotion.com
Temporary user account- ID= testaccount , PW= !helpme1!

Thanks again Kirk and thanks in advance to anyone else who can offer some of their script/code knowledge!

Please help. I would really like for the chatbox to function correctly with the same resizing capabilities as when normally activated....

what? all the thing is soing now is moving the little corner icon up and down... lol

I will try to take another crack at it tomorrow, other then that it would just leave it as it was the first time,regular size chat with no drag.
Or may consider using a couple different style pop outs.

liek a real easy way for a good pop out is to place the chat code on a html page the way you want it with you background etc.. added.

Then go over here and adjust the size and how you want it to post out and add the html page link.. thats one way.

Oh wait you dont even have to use a html page, just add your chat box url.

example

Code:

<a href="http://www.mplf.forumotion.com/chatbox/index.forum?" target="_blank" onclick="window.open('http://www.mplf.forumotion.com/chatbox/index.forum?','CHAT ROOM','resizable=1,status=1,directories=1,width=900,height=500,top=60,left=60');return false;">POP-OUT CHAT</a>

and you can always add a image where the pop-out text is, just make sure it's in html format.

Link for generator.
http://www.ricocheting.com/code/javascript/html-generator/popup-window

Hey, thanks for responding, I see you have been busy today on the board and I just checked out the support forum you started, nice job.

No the resize cursor works fine but only resizes the inner div without simultaneously resizing the containing div. Yes I have been thinking just to set it back to a fixed height because after hours of research I have been unable to determine why it functions different in the announcements. It would be great if you could take a look once more, when you have time of course. I may consider the xat also, seems pretty cool.

Thanks again Kirk