constrain-resize.html revision 741c71838d82f8e9c4a01d3c95d5c7feaaa7f8d9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Constrain a Resize</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css">
</head>
<body>
<div id="doc">
<h1>Example: Constrain a Resize</h1>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<div class="yui3-g">
<div id="main" class="yui3-u">
<div class="content"><div class="intro">
<p>This example shows how to create a resizable element where the resize operation is constrained to a specific aspect ratio.</p>
</div>
<div class="example">
<style>
#demo {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: #8DD5E7;
position: relative;
padding: 1em;
margin: 2em;
}
</style>
<div id="demo">Resize Me</div>
<script>
YUI().use('resize', function(Y) {
var resize = new Y.Resize({
//Selector of the node to resize
node: '#demo'
});
minWidth: 50,
minHeight: 50,
maxWidth: 300,
maxHeight: 300,
preserveRatio: true
});
});
</script>
</div>
<h3 id="setting-up-the-node">Setting up the Node</h3>
<p>First we need to create an HTML element to make resizable.</p>
<pre class="code prettyprint"><div id="demo">Resize Me</div></pre>
<p>Next, we'll give that element some CSS to make it visible.</p>
<pre class="code prettyprint">#demo {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: #8DD5E7;
position: relative;
padding: 1em;
margin: 2em;
}</pre>
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>resize</code> module. This module is a rollup that includes the <code>resize-constrain</code> submodule; that means we have access to the <code>ResizeConstrained</code> plugin.</p>
<pre class="code prettyprint">YUI().use('resize');</pre>
<h3 id="making-the-node-resizable">Making the Node resizable</h3>
<p>Now that we have a YUI instance with the <code>resize</code> module, we need to instantiate the <code>Resize</code> instance on this Node.</p>
<pre class="code prettyprint">YUI().use('resize', function(Y) {
var resize = new Y.Resize({
//Selector of the node to resize
node: '#demo'
});
});</pre>
<h3 id="adding-the-constrained-plugin">Adding the Constrained Plugin</h3>
<p>Now we will plug <code>ResizeConstrained</code> into our Resize instance. This plugin will allow you to limit the resize dimensions in special ways.</p>
<pre class="code prettyprint">YUI().use('resize', function(Y) {
var resize = new Y.Resize({
//Selector of the node to resize
node: '#demo'
});
minWidth: 50,
minHeight: 50,
maxWidth: 300,
maxHeight: 300,
preserveRatio: true
});
});</pre>
<p>In this case, we've used the constraint feature to specify minimum height and width for the element while setting <code>preserveRatio</code> to <code>true</code>, locking in the original aspect ratio for the element.</p>
</div>
</div>
<div id="sidebar" class="yui3-u">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#setting-up-the-node">Setting up the Node</a>
</li>
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#making-the-node-resizable">Making the Node resizable</a>
</li>
<li>
<a href="#adding-the-constrained-plugin">Adding the Constrained Plugin</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="A simple resize implementation that utilizes the <code>ResizeConstrained</code> plugin to set min/max dimensions and to lock in the resized element's aspect ratio."><a href="constrain-resize.html">Constrain a Resize</a></li>
<li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment."><a href="image-resize.html">8-way Image Resize</a></li>
<li data-description="Plugs a widget with resize functionality."><a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a></li>
<li data-description="Plugs a widget with resize functionality, and implements <code>ResizeConstrained</code>"><a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>prettyPrint();</script>
</body>
</html>