Beefy Boxes and Bandwidth Generously Provided by pair Networks
The stupid question is the question not asked
 
PerlMonks  

Comment on

( #3333=superdoc: 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


In reply to Free Nodelet Hack: Floating Chatterbox by ccn

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • Outside of code tags, you may need to use entities for some characters:
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others wandering the Monastery: (10)
    As of 2014-07-14 06:43 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      When choosing user names for websites, I prefer to use:








      Results (255 votes), past polls