Blame | Last modification | View Log | RSS feed
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>jQuery UI Resizable - Visual feedback</title><link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /><script type="text/javascript" src="../../jquery-1.4.2.js"></script><script type="text/javascript" src="../../ui/jquery.ui.core.js"></script><script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script><script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script><script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script><link type="text/css" href="../demos.css" rel="stylesheet" /><style type="text/css">#resizable { width: 150px; height: 150px; padding: 0.5em; }#resizable h3 { text-align: center; margin: 0; }.ui-resizable-ghost { border: 1px dotted gray; }</style><script type="text/javascript">$(function() {$("#resizable").resizable({ghost: true});});</script></head><body><div class="demo"><div id="resizable" class="ui-widget-content"><h3 class="ui-widget-header">Ghost</h3></div></div><!-- End demo --><div class="demo-description"><p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p></div><!-- End demo-description --></body></html>