Movable and re-sizable div, child divs re-sizing with it?

Ok so I have literally made a "My Computer "window purely from CSS3. I'm gonna finish it, and what I'd like to be able to do is move it about and make the window re-sizable.

Some child classes only want to resize in width, and some want to re-size in width AND height. That seems like quite a task, and I'm actually more concerned about the moving of the div. I've given it a go a few times and I just an't get it to work!

Can someone possibly help me? Maybe a JFiddle of it working? I 开发者_如何学Goappreciate it guys!

EDIT: Here's the site, SORRY!:

http://projects.beauaugust.co.uk/windows98/

View source, it's all in there!

Have you looked into http://jqueryui.com/demos/resizable/ and http://jqueryui.com/demos/draggable/? I imagine that you could get the functionality you desire between those two and some custom code.

I just looked at your code on jfiddle and put this:

$(function() {
    $( ".window" ).draggable().resizable();
});

which worked great to make it draggable. It resized to a degree, too. To make the resize work better, it would be best if you gave relative sizes to the child elements of window (like 100%) instead of pixel sizes.

I hope that helps. If so, please mark as answer.

You may consider using Interface Elements with JQuery

Here are a list of demos.

In particular you may want to look at this one

Other stuff from that the Interface plugin can help you as well like this one (when do implement scroll)

But have a play with the interface plugin for JQuery. It is very useful in my opinion.

I'm right there with Robert. I'm not sure that CSS has the ability to make things that dynamic. In which case the solution is Javascript or as proposed (and much more simple) jquery.

I could be mistaken, but I think in order for javascript (possibly jquery as well) to pinpoint exactly what you want to be able to do anything to, you need to use the 'id' attribute.

<div class="window" id="window_main">

Then when you use the jquery functions, you can apply the drag quality to "window_main".

Hope that helps.

Good luck!

Check working example at http://jsfiddle.net/Sc2Qm/1/

Currently resizable will only resize .window due to the way you have your html and CSS layed out.