monkdiscuss
ccn
Put the code below in your [node://Free Nodelet Settings|FreeNodelet] and you get floating Chatterbox.
<p>Two buttons <c>[-]</c> and <c>[^]</c> appear on the header of CB nodelet.
<ul>
<li><c>[-]</c> folds/unfolds chatterbox
<li><c>[^]</c> detach/attach chatterbox from nodelet table. You can move detached chatterbox over screen dragging it by it's header.
</ul>
<p><b>Update:</b>[Fri Dec 5 21:47:20 2008 GMT] <br><font color=red>third [↔] (resize) button was added here:</font> [id://728392]
<p>
<readmore>
<code>
<script type="text/javascript">
// A lot of code was taken from
// Dunn By Paul's http://dunnbypaul.net/js_mouse/
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 600;
var oriy = 0;
var elex = 0;
var eley = 0;
var cb_mz = false;
var cb_dt = /cbdt=1/.test(document.cookie) ? true : false;
if(/cbxy=(\d+)-(\d+)/.test(document.cookie)) {
orix = RegExp.$1;
oriy = RegExp.$2;
}
if (cb_dt) {
document.write('<style type="text/css">');
document.write('#Chatterbox{position:fixed;left:'+orix+'px;top:'+oriy+'px;width:300px;border:solid 1px red;z-index:10;}');
document.write('</style>');
}
var dragobj = null;
var cb = null;
var cb_btn_tgl;
var cb_btn_det;
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) {
cb.style.position = 'fixed';
cb.style.borderStyle = 'solid';
cb.style.borderWidth = '1px';
cb.style.borderColor = 'red';
cb.style.width = '300px';
cb.childNodes`[1`].childNodes`[0`].style.width = '300px';
cb.style.left = (orix).toString(10) + 'px';
cb.style.top = (oriy).toString(10) + 'px';
}
else {
cb.style.position = "static";
cb.style.left = '0px';
cb.style.top = '0px';
}
}
function cb_init()
{
cb = document.getElementById('Chatterbox');
cb.childNodes`[1`].onmousedown = grab;
cb.childNodes`[1`].style.cursor = 'pointer';
if(cb_dt)
cb.childNodes`[1`].childNodes`[0`].style.width = '300px';
var elem =document.createElement('SPAN');
elem.innerHTML=' ';
cb.childNodes`[1`].childNodes`[0`].appendChild(elem);
cb_btn_tgl=document.createElement('SPAN');
cb_btn_tgl.innerHTML='`[–`]';
cb.childNodes`[1`].childNodes`[0`].appendChild(cb_btn_tgl);
cb_btn_tgl.onclick=cb_toggle;
cb_btn_det=document.createElement('SPAN');
cb_btn_det.innerHTML='`['+(cb_dt?'v':'^')+'`]';
cb.childNodes`[1`].childNodes`[0`].appendChild(cb_btn_det);
cb_btn_det.onclick=cb_detach;
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(context)
{
if (!cb_dt) return;
context = document.getElementById('Chatterbox');
document.onmousedown = falsefunc;
dragobj = context;
document.onmousemove = drag;
document.onmouseup = drop;
grabx = mousex;
graby = mousey;
elex = orix = dragobj.offsetLeft;
eley = oriy = dragobj.offsetTop;
update();
}
function drag(e)
{
if (dragobj)
{
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
dragobj.style.left = (elex).toString(10) + 'px';
dragobj.style.top = (eley).toString(10) + 'px';
document.cookie='cbxy='+(elex).toString(10)+'-'+(eley).toString(10);
}
update(e);
return false;
}
function drop()
{
dragobj = null;
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null;
}
setTimeout('cb_init()',500);
</script>
</code>
</readmore>
<p>I've tested it in FF3 only
<p><b>Update:</b> a couple of bugs was fixed