Beefy Boxes and Bandwidth Generously Provided by pair Networks
Keep It Simple, Stupid
 
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 romping around the Monastery: (16)
As of 2015-07-07 14:32 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 (89 votes), past polls