jqueryスライダの横のテキストラベル（未知数の幅のdiv）

Question

親のdivの中に、左側にテキストラベルがあり、右側にスライダ（jQuery UIを使用）があります。

私は、スライダーが利用可能なすべてのスペースを占めるようにしたいと思います。this questionと違って、親divの幅は不明です。

だから、概念的には、このようなもの（壊れた試みとjsfiddle here）する必要があります：

<div id="parentDiv" style="width:100%"> 
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div> 
</div> 

しかし、私はクロム、FF3とIE8で動作します簡単に何かを得ることはできません。誰にもアイデアはありますか？

Answer 1

あなたはjQueryのを使用して幅を設定してみてください：

$('#unicornSlider') 
    .width($('#parentDiv').width() -$('#parentDiv span').width() - 20) 
    .slider() 

I'evあなたfiddleがこれを含むように更新。 （私は100％+パディングがウィンドウより大きかったので、親divの幅を90％に変更しなければならなかった）。

更新：ブラウザウィンドウのサイズが変更されたときにこの幅が保持されることに気付きました。 $(window).resize(function)で幅を再計算することができます。