The third button [↔] was added. Detached Chatterbox can be stretched/shrinked by dragging by that button.
<style>
.cbdiv {float:right;margin-left:-50px; }
.pointer {cursor: pointer;}
</style>
<script type="text/javascript">
<!--
var mousex;
var mousey;
var grabx;
var graby;
var orix = 600;
var oriy = 30;
var elex;
var eley;
var elew;
var oriw = 300;
var dragobj;
var cb;
var cb_cell;
var cb_btn_tgl;
var cb_btn_det;
var cb_mz = false;
var cb_dt = /cbdt=1/.test(document.cookie) ? true : false;
if(/cbxy=(\d+)-(\d+)-(\d+)/.test(document.cookie)) {
orix = RegExp.$1;
oriy = RegExp.$2;
oriw = RegExp.$3;
}
if (cb_dt) {
document.write('<style type="text/css">');
document.write('#Chatterbox{position:fixed;left:'+orix+'px;top:'+ori
+y+'px;width:'+oriw+'px;border:solid 1px red;z-index:10;}');
document.write('</style>');
}
function falsefunc(){return false;}
function cb_toggle() {
cb_mz = !cb_mz;
cb.childNodes[3].childNodes[0].style.display = cb_mz ? 'none' : '';
cb_btn_tgl.innerHTML = cb_mz ? '[+]' : '[–]';
}
function cb_detach() {
cb_dt = !cb_dt;
cb_btn_det.innerHTML = cb_dt ? '[v]' : '[^]';
document.cookie = 'cbdt='+(cb_dt ? '1' : '0');
if (cb_dt) {
with (cb.style) {
position = 'fixed';
borderStyle = 'solid';
borderWidth = '1px';
borderColor = 'red';
width = (oriw).toString(10) + 'px';
left = (orix).toString(10) + 'px';
top = (oriy).toString(10) + 'px';
}
cb_cell.style.width = (oriw).toString(10) + 'px';
}
else {
with (cb.style) {
position = "static";
left = '0px';
top = '0px';
}
}
}
function insert_btn (div, name, onclick)
{
var btn = document.createElement('SPAN');
div.appendChild(btn);
btn.innerHTML = '['+name+']';
btn.onclick = onclick;
btn.className = 'pointer';
return btn;
}
function cb_init()
{
cb = document.getElementById('Chatterbox'); // tbody
cb_cell = cb.childNodes[1].childNodes[0];
var hdr = document.createElement('DIV');
cb_cell.replaceChild(hdr,cb_cell.childNodes[0]);
with(hdr) {
innerHTML = "Chatterbox";
onmousedown = grab_mv;
className = 'pointer';
}
if(cb_dt) cb_cell.style.width = (oriw).toString(10) + 'px';
var div = document.createElement('DIV');
cb_cell.insertBefore(div,cb_cell.childNodes[0]);
div.className = 'cbdiv';
cb_btn_tgl = insert_btn(div, '–', cb_toggle);
cb_btn_det = insert_btn(div, (cb_dt ? 'v' : '^'), cb_detach);
insert_btn(div, '↔', falsefunc).onmousedown = grab_sz;
document.onmousemove = update;
update();
}
function getMouseXY(e) {
if (!e) e = window.event;
if (e) {
if (e.pageX || e.pageY) {
mousex = e.pageX;
mousey = e.pageY;
}
else if (e.clientX || e.clientY) {
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
}
}
}
function update(e) {
getMouseXY(e);
}
function grab() {
document.onmousedown = falsefunc;
dragobj = cb;
document.onmouseup = drop;
grabx = mousex;
graby = mousey;
elex = orix = dragobj.offsetLeft;
eley = oriy = dragobj.offsetTop;
elew = oriw = dragobj.offsetWidth;
update();
}
function grab_mv() {
if (!cb_dt) return;
grab();
document.onmousemove = drag_mv;
}
function grab_sz() {
if (!cb_dt) return;
grab();
document.onmousemove = drag_sz;
}
function drag(e) {
dragobj.style.left = (elex).toString(10) + 'px';
dragobj.style.top = (eley).toString(10) + 'px';
dragobj.style.width = (elew).toString(10) + 'px';
cb_cell.style.width = (elew).toString(10) + 'px';
document.cookie='cbxy='+(elex).toString(10)+'-'+(eley).toString(10)+
+'-'+(elew).toString(10);
}
function drag_mv(e) {
if (dragobj) {
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
drag(e)
}
update(e);
return false;
}
function drag_sz(e) {
if (dragobj) {
elew = mousex+oriw-grabx;
drag(e)
}
update(e);
return false;
}
function drop() {
dragobj = null;
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null;
}
setTimeout('cb_init()',500);
// -->
</script>