When showing Gareth how far I'd gotten on my CMS, he made a comment that it would be cool if you could drag the toolbar outside of the browser and could move it about onto another screen similar to the photoshop toolbars.
Being the type that likes a challenge I decided to give it a bash. To do this I used the jQuery UI bind property to fire a function when the toolbar was dragged. When the toolbar is dragged to the edge of the browser I use some javascript to calculate which side of the browser it is on and how far down from the top of the screen it is.
I then remove the toolbar from the page and open a pop up window using the co-ordinates I previously calculated.
I then had to write some code to put the control bar back in once the pop-out window had been closed to do this I used onbeforeunload.
The code for all the above lookes something like this:
$("#newPost #controls").bind("drag", function(event, ui) {
var left = $("#newPost #controls").css('left').replace(/[^-\d\.]/g, '');
var theWindow = $(window).width()-65;
var theHeight = $("#newPost #controls").css('height').replace(/[^-\d\.]/g, '')-25;
if(left< -65 || left>theWindow) {
var top = eval($("#newPost #controls").css('top').replace(/[^-\d\.]/g, ''))+window.screenY;
var browseleft = window.screenX;
if (left< -65){
var leftpos=browseleft-131;
} else {
var leftpos=browseleft+20+$(window).width();
}
$('#newPost #controls').remove();
var popOutTools = window.open( "tools.html", "myWindow", "status = 0, location=0, height ="+theHeight+", width = 131, resizable = 0, top="+top+", left="+leftpos+"" );
popOutTools.onbeforeunload = function() {
$('body').prepend(html code for toolbar goes in here);
};
}
});