jQuery 1.4.2 Le div divisible s'arrête de fonctionner une fois qu'il est entré dans la fenêtre du navigateur

Question

J'ai un div 'toolbar' que j'ai rendu redimensionnable via jQuery UI. La chose étrange est, je ne peux pas faire glisser la div sauf si la div est si longue qu'elle dépasse la page visible, faisant apparaître les barres de défilement. Je peux ensuite faire glisser le div où je veux. Cependant, si je fais glisser la div de sorte qu'elle rentre dans la page sans barres de défilement, et que je la laisse tomber, je ne peux plus la redimensionner (à moins que je ne réduise la page pour que les barres de défilement apparaissent à nouveau!).

Voici le html:

<div class="Viewer"> 
    <div align="center"> 
     <div align="left" style="position:relative; width:100%; height:30px;"> 
      <div id="toolbar_buttons" class="ToolBar"> 
       <table> 
        <tr> 
         <td> 
          <button id="play">play</button> 
         </td> 
         <td> 
          <button id="stop">stop</button> 
         </td> 
         <td> 
          <div id="slider-vertical"></div> 
         </td> 
         <td style="width:30px;"> 
          <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
          <span id="amount"></span> 
         </td> 
         <td> 
          <button id="btnScreenSizer">fit to screen</button> 
         </td> 
         <td> 
          <div id="status">status stuff goes here</div> 
         </td> 
        </tr> 
       </table> 

      </div> 

      <div id="toolbar" class="ui-widget-header"></div> 

     </div> 
    </div> 
</div> 

Voici le CSS:

#toolbar 
{ 
    display: none; 
    width:  300px; 
    height:  45px; 
    z-index: -999999; 
} 

Voici le jQuery:

$("#toolbar").resizable({ 
    handles: "se", 
    maxHeight: 45, 
    minHeight: 45, 
    minWidth: 400 
}); 

Toutes les idées? La barre d'outils est située dans un iFrame.

Answer 1

Je ne sais pas exactement quel était le problème mais j'ai corrigé le problème que j'avais.

J'ai enlevé la div avec 'toolbar' id = et a ajouté la classe ui-widget-tête à la div 'les toolbar_buttons de, comme ceci:

 <div id="toolbar_buttons" class="ToolBar ui-widget-header"> 
      <table> 
       <tr> 
        <td> 
         <button id="play">play</button> 
        </td> 
        <td> 
         <button id="stop">stop</button> 
        </td> 
        <td> 
         <div id="slider-vertical"></div> 
        </td> 
        <td style="width:30px;"> 
         <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
         <span id="amount"></span> 
        </td> 
        <td> 
         <button id="btnScreenSizer">fit to screen</button> 
        </td> 
        <td> 
         <div id="status">status stuff goes here</div> 
        </td> 
       </tr> 
      </table> 

     </div> 

Maintenant, je peux faire glisser tout moment.