I put a bit more work into the OS-Style website this evening and the resizing is done now. I tried the getElementById() approach first, changing the width and height of various elements via their CSS properties, and it seemed to work just fine. I had to make some consessions with the ‘grabbing’ of the resize gadget in that you always grab it right in the middle, but the effect is unnoticable and – what the heck – it works.

All that remains now is to get the windows to disappear when you hit the ‘close’ gadget, and since they’re in a DIV anyway, all I need to do is set their visibility to invisible.

I know I’ve been stupidly busy over the past few weeks – hence the complete disregard for site updates – but a few days ago it occurred to me that I could quite easily make a box that followed the mousepointer around the screen. This was an offshoot of some mouse-tracking stuff that I’d done for another website. I knocked together a simple demo that had two ‘windows’ on the screen. They were mere tables comprising a Title row and a Body row but they did the job. You can click the title bar and drag the window around the screen muich like an OS, and click on a partially hidden window to bring it to the front – again, just like an OS.

I spent all yesterday working like crazy once again but giving occasional thought to how I could implement this into my website. Yes, it’s time to re-design the bl0g! The new one will be going back to it’s ‘green bar’ roots but will look more like some weird, web-based version of Linux. Everything’s going to be redone from the ground up which will mean the forums stuff will take ages, but it’ll be worth it.

Last night’s technical challenge was to stop the mouse-pointer ‘dropping’ the window if you moved it too fast and went outside the boundary of the title bar. It all stemmed from the fact that I was using an IFRAME to display a second content file and replacing this with a DIV, style overflow:auto, fixed the problem nicely. This has the added advantage of making all of the content part of the ‘desktop’ page rather than a seperate file, which in turn helps with search engine optimisation.

I think tonight’s fun (after I’ve been to see Booty will be to get the window resizing working. Currently you can drag the windows about the screen but they’re a fixed size. The resizing presents it’s own problems because the windows have PNG dropshadows, and the only way to get those to work on IE is to use a behaviour fix that only works for the IMG tag – PNGs as background images don’t work.

I think I’m going to have to use innerHTML and redraw the IMG tags as the windows are being dragged larger. There are seven PNG files to redraw so I’m not sure what the speed is going to be like. It may be possible to hook into them using getElementById and adjust the width/height (where applicable) CSS properties which I *think* will be faster. Obviously some experimentation is going to be required.

Right, I better get ready for work…