Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl-Sensitive Sunglasses
 
PerlMonks  

Free Nodelet Hack: Floating Chatterbox

by ccn (Vicar)
on Nov 23, 2008 at 09:11 UTC ( #725405=monkdiscuss: print w/ replies, xml ) Need Help??

Put the code below in your FreeNodelet and you get floating Chatterbox.

Two buttons [-] and [^] appear on the header of CB nodelet.

  • [-] folds/unfolds chatterbox
  • [^] detach/attach chatterbox from nodelet table. You can move detached chatterbox over screen dragging it by it's header.

Update:[Fri Dec 5 21:47:20 2008 GMT]
third [↔] (resize) button was added here: Re: Free Nodelet Hack: Floating Chatterbox (resizable)

<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:'+ori +y+'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 ? '`[+`]' : '`[&ndash;`]'; } 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='&nbsp;'; cb.childNodes`[1`].childNodes`[0`].appendChild(elem); cb_btn_tgl=document.createElement('SPAN'); cb_btn_tgl.innerHTML='`[&ndash;`]'; 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>

I've tested it in FF3 only

Update: a couple of bugs was fixed

Comment on Free Nodelet Hack: Floating Chatterbox
Select or Download Code
Re: Free Nodelet Hack: Floating Chatterbox
by juster (Friar) on Nov 23, 2008 at 11:40 UTC

    ++This is very cool!

    There was a syntax error regarding the oriy variable (or maybe orix?). I replace all orix with origx and all oriy with origy and it worked fine.

    s/ori([xy])/orig$1/g;
      Thx, fixed. And there was missing } in style definition
Re: Free Nodelet Hack: Floating Chatterbox
by koolgirl (Hermit) on Nov 23, 2008 at 21:34 UTC
    ++ This is great! First time I've used my free nodelet, too ;)
Re: Free Nodelet Hack: Floating Chatterbox (resizable)
by ccn (Vicar) on Dec 05, 2008 at 21:39 UTC

    The third button [↔] was added. Detached Chatterbox can be stretched/shrinked by dragging by that button.

    Tested on FireFox 3.0

Re: Free Nodelet Hack: Floating Chatterbox
by webfiend (Vicar) on Dec 09, 2008 at 23:23 UTC

    Oh sweet sweet silence. Usually I like the CB, but sometimes the discussions annoy me. The only thing that would make this better is to have it remember it's been folded on loading a new page.

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://725405]
Front-paged by grinder
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others pondering the Monastery: (12)
As of 2014-12-27 16:31 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    Is guessing a good strategy for surviving in the IT business?





    Results (177 votes), past polls