2010-08-02 4 views
0

jQuery UI를 통해 크기를 조절할 수있는 'toolbar'div가 있습니다.jQuery 1.4.2 resizable div는 브라우저 윈도우에 맞으면 작동을 멈 춥니 다.

div가 너무 길어서 볼 수있는 페이지를 지나치지 않으면 스크롤바가 나타나지 않는 이상 이상한 일은 div를 끌 수 없습니다. 그런 다음 div를 원하는 위치로 드래그 할 수 있습니다. 그러나 div를 드래그하여 스크롤 막대가없는 페이지에 맞춰 놓으면 드롭 다운하면 스크롤 막대가 다시 나타나도록 페이지를 작게하지 않으면 다시 크기를 조정할 수 없습니다.

는 CSS
<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> 

은 다음과 같습니다 :

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

어떤 아이디어 : 여기

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

는 jQuery의 여기

는 HTML입니까? 툴바는 iFrame에 있습니다.

+2

툴바 div의 CSS는 무엇입니까? 또한 HTML에 포함 된 HTML을 추가 할 수 있습니까? – JasCav

+0

CSS와 div가 들어있는 div를 추가했습니다. – Darcy

+0

글쎄, iframe이 문제를 일으키는 것 같습니다. 코드의 실제 예가 어딘가에 있습니까? 아마 jsfiddle 그것? –

답변

0

정확하게 문제가 무엇인지 확신 할 수 없지만 문제가 해결되었습니다.

내가 아이디 = '도구 모음'와 DIV 제거 등처럼 'toolbar_buttons'사업부에 UI - 위젯 헤더 클래스를 추가 :

 <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> 

지금 내가 어떤 시간을 끌 수 있습니다.