jQuery & CSS: simulate windows (part 2)

Tweet

In my last post I explained how to simulate a window with show/hide and close buttons. Now I'm going to show you how to complete the work adding drag and resize.
Remember our example?

Yeah! That's it. Now let's see how to make the window draggable and resizable with jQuery UI.

As a start you should go and see my last post  jQuery & CSS: simulate windows because we are going to change that code and probably you need to know what we've already achieved.
Let's start from the top of our page and see what to change.

Adding the correct library

First of all we need to add a new library (jQuery UI) and the related stylesheet:

<script type="text/javascript" src="../../js/jquery-ui-1.8.8.custom.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Again, remember to change the path to the library according to yours.

Add the function

Then we change our jQuery code, adding the highlighted part of the following snippet:

<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
    $(".bar_win").click(function(){
        $(".content").slideToggle("slow");
    });
    $(".bar_close").click(function(){
        $(".content").hide();
        $(".bar").hide();
    });
    $(function() {
        $( "#wrap" ).draggable({ handle: ".bar"});
        $( ".content" ).resizable({
            alsoResize: ".bar"
        });
    });
});
// -->
</script>

The highlighted part will make our window draggable and resizable. As you have noticed, we added a new container called "wrap" for the drag function. For the resize effect, we used the "alsoResize" option because we need to resize both the "content" div and the "bar" div.

The styles

We need to change the styles as well. To make things easier, replace all your style with the following:

<style type="text/css">
<!--
.bar {
    border: thin solid #999999;
    background-color: #CEDCE9;
    height: 15px;
    max-height: 15px;
    min-height: 15px;
    width: 250px;
    margin: 2px;
    position: absolute;
    left: 10px;
    top: 10px;
    color: #000000;
}
.bar_close {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position:absolute;
    text-align: left;
    left: 0px;
    margin: 2px;
    color: #000000;
    font-size: 10px;
    font-weight: bold;
}
.bar_win {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position:absolute;
    right: 0px;
    text-align: right;
    margin: 2px;
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}
.content {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: thin solid #999999;
    height: 200px;
    width: 250px;
    margin: 2px;
    position: absolute;
    left: 10px;
    top: 29px;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #0066FF;
}
a {
    text-decoration: none;
    color: #000000;
    outline: none;
    -moz-outline-style: none;
}
-->
</style>

Basically we just added two things to the "bar" div style: min-height and max-height. That is because we don't want the bar to shrink "too much" when the window is resized.

The divs

The divs do not change much: just add the hightlighted part:

<div id="wrap">
<div class="bar">
<div class="bar_close"><a href="#">X</a></div>
<div class="bar_win"><a href="#">_</a></div>
</div>
<div class="content" >The content of your window goes here. Please notice that it flows correctly.</div>
</div>

Very easy, isn't it?

Now your window is resizable and draggable!