Live listener on other's resizable div width
<p>Lets say we have one div:</p>

<pre><code>&lt;div id="left"&gt;Some content&lt;/div&gt;
</code></pre>

<p>Div with id "left" is resizable div (it can be re sized with mouse in the browser) and when re-sized, it receives CSS style for current width like this:</p>

<pre><code>&lt;div id="left" style="width: 289px;"&gt;Some content&lt;/div&gt;
</code></pre>

<p>What I want to achieve is to read width value on live event (or something like that) of #left div and based on that value add some conditions (it must be live event, not to read it on click or on mouse release click etc.) ... Thanks for your help in advance!</p>

<p><strong>SOLUTION:</strong></p>

<p>You can use your custom bind function to achieve this:</p>

<pre><code>(function(){
        var interval;
        jQuery.event.special.liveresize = {
            setup: function(){
                var self = this,
                $this = $(this),
                $originalContent = $this.width();
                interval = setInterval(function(){
                if($originalContent != $this.width()) {
                        $originalContent = $this.width();
                        jQuery.event.handle.call(self, {type:'liveresize'});
                    }
                },100);
            },
            teardown: function(){
            clearInterval(interval);
            }
        };
        })();
</code></pre>

<p>And then just call it:</p>

<pre><code>$(function() {
            $('#left').bind('liveresize', function() {
                var actual_width = $(this).width();
                if(actual_width &lt; 930) 
                {
                    $('#left').addClass('ng-av-small-left');
                    $('#left').addClass('ng-av-small-right');    
                } else 
                {
                    $('#left div.block div.left').removeClass().addClass('left');
                    $('#left div.block div.right').removeClass().addClass('right');
                }       
                });
        });
</code></pre>
