Themed Resizable Helpers

Adding jQuery UI theme style properties to the resizable helper element.

by Adam Boduch

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css">
<div id="resizable" class="ui-widget ui-widget-content ui-corner-all">
     <h3 class="ui-widget-header">Animate</h3>
</div>

CSS

#resizable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
}
#resizable h3 {
    text-align: center;
    margin: 0;
}

JavaScript

$("#resizable").resizable({
    
    // The animate option will enable the helper element.
    animate: true,
    
    // Run just before the resize action starts.
    start: function( e, ui ) {
        
        // Grab the "border-color" and the "background-color" CSS
        // properties from the element that's being resized.
        var border = ui.element.css( "border-color" ),
            background = ui.element.css( "background-color" );
        
        // Grab the "0, 0, 0" arguments from the "rgb(0, 0, 0)" string.
        background = ( /\((.+)\)/ ).exec( background )[ 1 ];

        // Sets the CSS properties on the helper overlay. The
        // background is modified to include an alpha setting of "0.1".
        ui.helper.css({
            border: "2px dotted " + border,
            background: "rgba( " + background + ", 0.1 )"
        });
        
        // Also include rounded corners on the helper if they're
        // found on the element.
        if ( ui.element.hasClass( "ui-corner-all" ) ) {
            ui.helper.addClass( "ui-corner-all" );    
        }
        
    }

});