Wie benutze ich live Breite eines Elements, um die Größe eines anderen Div gleichzeitig zu ändern?

Question

Ich habe eine spezielle Aufgabe, ich muss die Größe eines DIV ändern, wobei die LiveBreite des anderen DIVs in der Größe geändert wird. Ich würde gerne wissen, wie ich das machen kann, siehe Fiddle zum Beispiel: http://jsfiddle.net/Lindow/x8tdp0kg/14/, (klick auf einen Text div um die Griffe erscheinen zu lassen). Ich habe versucht, width, aber es funktioniert nicht auf meinem Code.

Javascript:

$('#handles_manager').resizable({ 
    handles: { 
    'e': '#egrip', 
    'w': '#wgrip' 
    } 
}); 

function showHandles(e) { 
    var width = $(this).width(); 
    var pos_left = $(this).position().left; 
    var post_top = $(this).position().top; 
    $('#handles_manager').css({'width':width, 'transform':'translate3d(' + pos_left + 'px, ' + post_top + 'px, 0px)', 'visibility':'visible'}); 

    var handles_width = $('#handles_manager').width(); // Get live width 
    $(this).css({'width': handles_width + 'px !important'}); 

} 

var elements = document.getElementsByClassName('element'); 
for(var i = 0; i < elements.length; i++) { 
    var element= elements[i]; 
    element.addEventListener('click', showHandles); 
} 

HTML:

<div id="elements"> 
    <div class='element' style="transform: translate3d(0px, 0px ,0px)"> 
    <div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgtryin sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div> 
    </div> 

    <div class='element' style="transform: translate3d(0px, 100px ,0px)"> 
    <div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgskaf kpsoadk ijfdk jod sadsassads</div> 
    </div> 
</div> 

<div id="handles_manager"> 
    <div id="resize_content"></div> 
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div> 
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div> 
</div> 

Es gibt Gründe, warum ich diese Methode bin mit, das ist, warum ich bin nicht die Griffe direkt in den HTML-Code eingeben .

Irgendwelche Vorschläge?

Answer 1

Die Lösung gefunden, ich musste nur $('#...').resize(function(e) {} verwenden, um Live-Änderungen vornehmen zu können.