Beefy Boxes and Bandwidth Generously Provided by pair Networks
P is for Practical
 
PerlMonks  

Re: Free Nodelet Hack: Floating Chatterbox (resizable)

by ccn (Vicar)
on Dec 05, 2008 at 21:39 UTC ( #728392=note: print w/ replies, xml ) Need Help??


in reply to Free Nodelet Hack: Floating Chatterbox

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>


Comment on Re: Free Nodelet Hack: Floating Chatterbox (resizable)
Download Code

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://728392]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others browsing the Monastery: (18)
As of 2014-12-18 09:36 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

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





    Results (48 votes), past polls