<div class="intro">

<p>This example shows a weather widget that loads information from YQL, and implements a constrained resize-plugin. The end result is a widget that's draggable and resizable between mini and detail view.</p>

</div>

<div class="example">

{{>constrained-resize-plugin-source}}

</div>

<h3>Setting up the HTML</h3>

<p>First we create the HTML for the page. This consists of a weatherWidget div with header and body wrappers, along with some other content on the page.</p>

```

{{>constrained-resize-plugin-html}}

```

<p>Next, we add CSS, including CSS3 gradients to spruce up the widget.</p>

```

{{>constrained-resize-plugin-css}}

```

<h3>The Use Statement</h3>

<p>The use statement consists of various modules that we'll need to construct this widget.</p>

```

YUI().use('overlay', 'resize-plugin', 'resize-constrain', 'dd-plugin', 'yql', function(Y) {

```

<p>`resize-plugin` allows our overlay to be resizable. We also need to pull down the `resize-constrain` submodule to allow for constraining. The `dd-plugin` enables draggability on a widget, while the `yql` module allows us to send requests to YQL</p>

<h3>Enabling Constrained Resizing on the Widget</h3>

<p>Constrained resizing can be done by plugging in `Y.Plugin.Resize` and then plugging in `Y.Plugin.ResizeConstrained` under the `resize` namespace.</p>

```

weatherWidget = new Y.Overlay({

width: "250px",

height:"300px",

srcNode: "#weatherWidget",

visible: false,

align: {node:"#example", points:["tc", "bc"]}

});

//allow resizability and draggability

weatherWidget.plug([Y.Plugin.Resize, Y.Plugin.Drag]);

//we can plug in the resizeConstrained plugin on the 'resize' namespace

weatherWidget.resize.plug(Y.Plugin.ResizeConstrained, {

minWidth: 250,

minHeight: 170,

maxWidth: 250,

maxHeight: 300,

preserveRatio: false

});

weatherWidget.render();

```