Real-Time Div Resize

Detect resize of a specific div and display it. Useful when you want to give the user an easy way of knowing how much they are resizing. Currently makes use of a plugin and jQueryUI but ideally would like to find a way without using a plugin and using CSS3 resize styling.

HTML

<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<div id="resizable" class="resizable">
    <div class="dimension width">WIDTH
        <span id="width"></span>
    </div>
    <div class="dimension height">HEIGHT
        <span id="height"></span>
    </div>
</div>

CSS

div#resizable { 
    border: 1px solid #216278;
    border-radius: 5px;
    padding: 20px;
    background-color: #06799f;
    width: 300px;
    height: 150px;
    min-width: 300px;
    min-height: 150px;
}

div.dimension {
    display: none;
    opacity: 0.5;
    color: #61b4cf;
    font-size: 20px;
    font-family: helvetica;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

div.width {
    position: relative;
    left: 35%;
}

div.height {
    width: 50px;
    position: relative;
    top: 35%;
}

//It seems that CSS3 resizable causes a lot of problems...
//Currently not supported by all browsers in a reliable way
/*
.resizable {
    resize: both;  
    overflow: auto;
}
*/

JavaScript

$(function () {
    //only show when clicking on the div
    $('#resizable').mousedown(function() {
        $('div.dimension').show();
    });
    $('#resizable').mouseup(function() {
        $('div.dimension').hide();
    });
    $('#resizable').attrchange({
        callback: function (e) { 
        console.log($("#width").text($(this).width()));
        console.log($("#height").text($(this).height()));
           $("#width").text($(this).width() + 'px');
           $("#height").text($(this).height() + 'px');
        }
    }).resizable();
});

//For the window
/*$(window).resize(function() {
    $("#width").text($(this).width());
    $("#height").text($(this).height());
});*/

//Making use of attrchange.js AND jQueryUI
//http://meetselva.github.io/attrchange/javascripts/attrchange.js
//Still looking into ways to do it without plugin and using CSS3 resize