YUI 3.x Home -

YUI Library Examples: Resize Utility: 8-way Image Resize

Resize Utility: 8-way Image Resize

This example shows a simple 8-way image resize.

View example in new window.

Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo

Setting up the Node

First we need to create an HTML Node to make resizable.

  1. <div id="demoContainer" class="yui3-resize-knob">
  2. 	<img id="demo" src="assets/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
  3. </div>
<div id="demoContainer" class="yui3-resize-knob">
	<img id="demo" src="assets/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
</div>

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the resize module.

  1. YUI().use('resize');
YUI().use('resize');

Making the Node resizable

Now that we have a YUI instance with the resize module, we need to instantiate the Resize instance on this Node.

  1. YUI().use('resize', function(Y) {
  2.     var resize = new Y.Resize({
  3.         //Selector of the node to resize
  4.         node: '#demo'
  5.     });   
  6. });
YUI().use('resize', function(Y) {
    var resize = new Y.Resize({
        //Selector of the node to resize
        node: '#demo'
    });   
});

Adding the Constrained Plugin

Now we will add the contrained plugin. This plugin will allow you to limit the resize dimensions in special ways.

  1. YUI().use('resize', function(Y) {
  2.  
  3.     var resize = new Y.Resize({
  4.         //Selector of the node to resize
  5.         node: '#demo'
  6.     });
  7.     resize.plug(Y.Plugin.ResizeConstrained, {
  8.         constrain: '#demoContainer',
  9.         minHeight: 50,
  10.         minWidth: 50       
  11.     });
  12.  
  13. });
YUI().use('resize', function(Y) {
 
    var resize = new Y.Resize({
        //Selector of the node to resize
        node: '#demo'
    });
    resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#demoContainer',
        minHeight: 50,
        minWidth: 50       
    });
 
});

Adding some CSS to make it look like an 8-way resize

  1. #demo {
  2. 	height: 121px;
  3. 	width: 182px;
  4. 	position: absolute;
  5. 	top: 100px;
  6. 	left: 100px;
  7. }
  8.  
  9. #demoContainer {
  10. 	position: relative;
  11. 	height: 333px;
  12. 	width: 500px;
  13.     border: 1px solid black;
  14. }
  15.  
  16. /* knob handles demo */
  17.  
  18. .yui3-resize-knob .yui3-resize-handle-tr,
  19. .yui3-resize-knob .yui3-resize-handle-br,
  20. .yui3-resize-knob .yui3-resize-handle-tl,
  21. .yui3-resize-knob .yui3-resize-handle-bl,
  22. .yui3-resize-knob .yui3-resize-handle-b,
  23. .yui3-resize-knob .yui3-resize-handle-t,
  24. .yui3-resize-knob .yui3-resize-handle-l,
  25. .yui3-resize-knob .yui3-resize-handle-r {
  26. 	border: 1px solid #808080;
  27. 	background-color: #F2F2F2;
  28. 	height: 6px;
  29. 	width: 6px;
  30. }
  31.  
  32. .yui3-resize-knob .yui3-resize-handle-b,
  33. .yui3-resize-knob .yui3-resize-handle-t {
  34. 	left: 45%;
  35. }
  36.  
  37. .yui3-resize-knob .yui3-resize-handle-l,
  38. .yui3-resize-knob .yui3-resize-handle-r {
  39. 	top: 45%;
  40. }
  41.  
  42. .yui3-resize-knob .yui3-resize-handle-t,
  43. .yui3-resize-knob .yui3-resize-handle-tr,
  44. .yui3-resize-knob .yui3-resize-handle-tl {
  45. 	top: -4px;
  46. }
  47.  
  48. .yui3-resize-knob .yui3-resize-handle-b,
  49. .yui3-resize-knob .yui3-resize-handle-br,
  50. .yui3-resize-knob .yui3-resize-handle-bl {
  51. 	bottom: -4px;
  52. }
  53.  
  54. .yui3-resize-knob .yui3-resize-handle-l,
  55. .yui3-resize-knob .yui3-resize-handle-bl,
  56. .yui3-resize-knob .yui3-resize-handle-tl {
  57. 	left: -4px;
  58. }
  59.  
  60. .yui3-resize-knob .yui3-resize-handle-r,
  61. .yui3-resize-knob .yui3-resize-handle-br,
  62. .yui3-resize-knob .yui3-resize-handle-tr {
  63. 	right: -4px;
  64. }
  65.  
  66. .yui3-resize-knob .yui3-resize-handle-inner {
  67. 	background: none;
  68. 	height: 6px;
  69. 	width: 6px;
  70. }
#demo {
	height: 121px;
	width: 182px;
	position: absolute;
	top: 100px;
	left: 100px;
}
 
#demoContainer {
	position: relative;
	height: 333px;
	width: 500px;
    border: 1px solid black;
}
 
/* knob handles demo */
 
.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tl,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
	border: 1px solid #808080;
	background-color: #F2F2F2;
	height: 6px;
	width: 6px;
}
 
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t {
	left: 45%;
}
 
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
	top: 45%;
}
 
.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-tl {
	top: -4px;
}
 
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-bl {
	bottom: -4px;
}
 
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-tl {
	left: -4px;
}
 
.yui3-resize-knob .yui3-resize-handle-r,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tr {
	right: -4px;
}
 
.yui3-resize-knob .yui3-resize-handle-inner {
	background: none;
	height: 6px;
	width: 6px;
}

More Resize Utility Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings