Example: Widget with Resize Plugin under constraints

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.

Toronto Conditions

What's the weather like?

This little widget shows the weather forecast in Toronto. It's resizable, draggable, and implements the ResizeConstrained plugin. You can resize it between a simple and detailed view.

Setting up the HTML

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.

<div id="weatherWidget">
    <div class="yui3-widget-hd">Toronto Conditions</div>
    <div class="yui3-widget-bd" id="weatherWidgetContent"></div>
</div>

<h2>What's the weather like?</h2>
<p>This little widget shows the weather forecast in Toronto. It's resizable, draggable, and implements the <code>ResizeConstrained</code> plugin. You can resize it between a simple and detailed view.</p>

<p>
    <input type='button' class=".exampleBtn" id='launchOverlay' value="Loading Components..." disabled>
</p>

Next, we add CSS, including CSS3 gradients to spruce up the widget.

.example .yui3-overlay h1, .yui3-overlay h2, .yui3-overlay h3, .yui3-overlay h4, .yui3-overlay h5 {
  color:#666;
  -webkit-text-shadow: 0px 1px 1px white;
  -moz-text-shadow: 0px 1px 1px white;
  text-shadow: 0px 1px 1px white;
  border-bottom:none; 
  font-weight:lighter;
}
.example .yui3-overlay {
    background:white;
    color:black;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    border:1px solid #333;
}

.example .yui3-overlay .yui3-widget-hd {
  background: #499bea;
  background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
  background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%);
  background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
  background: linear-gradient(top, #499bea 0%,#207ce5 100%);
  -webkit-text-shadow: 0px 1px 1px #4FBCF7;
  -moz-text-shadow: 0px 1px 1px #4FBCF7;
  text-shadow: 0px 1px 1px #4FBCF7;
  color: #0F4C82;
  font-weight:bold;
  height:30px;
  font-size:16px;
  text-align:center;
  padding-top:10px;
  border-radius:3px;
}
.example .yui3-overlay #weatherWidgetContent {
  overflow:hidden;
}
.example .yui3-overlay .yui3-widget-bd {
  background: #e0eff9;
  background: -moz-linear-gradient(top, #e0eff9 0%, #ffffff 4%, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0eff9), color-stop(4%,#ffffff), color-stop(100%,#f2f2f2));
  background: -webkit-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -o-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  background: -ms-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0eff9', endColorstr='#f2f2f2',GradientType=0 );
  background: linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
}
.example .yui3-overlay #weatherWidgetContent #mainContainer, .example .yui3-overlay #weatherWidgetContent #futureDays  {

  color:#333;

}

#mainContainer {
    padding:10px;
    height:60px;
    width:85%;
    margin:0 auto;

}

#mainContainer #temp {
  font-size:20px;
  margin: 0 auto auto 10px;
  position: absolute;
  top: 66px;
  left:81px;
}
#futureDays .day {
  float:left;
  padding:10px;
  border-top:1px solid #ddd;
  background:#EDF3F7;

}
#futureDays h3, #futureDays h4 {
  margin:5px 0;
  text-align:center;
}
#futureDays h3 {
  font-size:90%;
  color: #5ea3d3;
}
#futureDays h4 {
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  color: #304166;
}
#mainContainer .clearfix {
  clear:both;
}
#weatherWidget {
    display: none;
}
#weatherWidget.yui3-overlay-content {
    display: block;
}

The Use Statement

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

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

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

Enabling Constrained Resizing on the Widget

Constrained resizing can be done by plugging in Y.Plugin.Resize and then plugging in Y.Plugin.ResizeConstrained under the resize namespace.

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();

Examples