Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl-Sensitive Sunglasses
 
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
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            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 lurking in the Monastery: (7)
    As of 2015-07-31 04:29 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      The top three priorities of my open tasks are (in descending order of likelihood to be worked on) ...









      Results (274 votes), past polls