Beefy Boxes and Bandwidth Generously Provided by pair Networks
Don't ask to ask, just ask
 
PerlMonks  

Comment on

( #3333=superdoc: print w/ replies, xml ) Need Help??

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

Tested on FireFox 3.0

<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 ? '[+]' : '[&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) { 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, '&ndash;', cb_toggle); cb_btn_det = insert_btn(div, (cb_dt ? 'v' : '^'), cb_detach); insert_btn(div, '&#x2194;', 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>

In reply to Re: Free Nodelet Hack: Floating Chatterbox (resizable) by ccn
in thread 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 making s'mores by the fire in the courtyard of the Monastery: (6)
    As of 2014-09-19 05:16 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      How do you remember the number of days in each month?











      Results (129 votes), past polls