Draggable Resizable Box with Rounded Corners Part: 1

So I tried to Google this and see if there was a tut available. I couldn't find one that had this type of box. Here's my attempt for this type of box. This example will use the current Prototype 1.6 Library so if you don't like prototype this tut is not for you. To just skip to the example you can look here.

Requirements:

• Rounded Corners
• Resizable in all directions
• Draggable
• Tableless design

To perform this feet you need to be familiar with the sliding doors technique (http://www.alistapart.com/articles/slidingdoors/). Although this technique is for tabs I will show you how this applies to this box example.

1. The HTML
I want to start off with building out a general skeleton of the box. A box has a top (or a header) for the title usually and the delete icon. The middle is where the main content for that box goes and the footer is to make the box complete (usually used for status text but in my example i wont be using that).


<!-- Box top, middle, bottom -->
<div class="box">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>


Here's where the sliding doors technique comes into play. Each part of the skeleton will have sliding doors applied. It just so happens that sliding doors is built to stretch and this is the reasoning why the box could be resizable now with rounded corners.

<!-- The Box with sliding doors -->
<div class="box">
<div class="top">
<div class="right">
<div class="center"></div>
</div>
</div>
<div class="middle">
<div class="right">
<div class="center"></div>
</div>
</div>
<div class="bottom">
<div class="right">
<div class="center"></div>
</div>
</div>
</div>


Lets add content wrappers for the top title and middle section

<!-- The Box with sliding doors -->
<div class="box">
<div class="top">
<div class="right">
<div class="center">
<div class="title"> Box Title </div>
<div class="close"></div>
</div>
</div>
</div>
<div class="middle">
<div class="right">
<div class="center">
<div class="content"> This is my Box content. </div>
</div>
</div>
</div>
<div class="bottom">
<div class="right">
<div class="center"></div>
</div>
</div>
</div>


Lastly we need to attach handles for every outer area of the box.
Lets add content wrappers for the top title and middle section

<div class="box">
<div class="top">
<div class="right">
<div class="center">
<div class="title"> Box Title </div>
<div class="close"></div>
</div>
</div>
</div>
<div class="middle">
<div class="right">
<div class="center">
<div class="content"> This is my Box content. </div>
</div>
</div>
</div>
<div class="bottom">
<div class="right">
<div class="center"></div>
</div>
</div>
<div class="top_handle"></div>
<div class="bottom_handle"></div>
<div class="left_handle"></div>
<div class="right_handle"></div>
<div class="top_left_handle"></div>
<div class="top_right_handle"></div>
<div class="bottom_left_handle"></div>
<div class="bottom_right_handle"></div>
</div>

Great the HTML is ready! in this next part we will be discussing the CSS implications.