變化幅度，以$（ '＃contentDiv'）設置寬度（newWidth）不工作

我有3個div的arrranged像 -

-------------------------- 
    | f  | headlineDiv | 
    | i  |    |<- draggable and resizable 
    | l  |_______________| 
    | t  |    | 
    | e  |    |<- draggable and resizable 
    | r div | storyDiv  | 
    |-------------------------- 
     ^
     | 
    can be hidden

繼承人一些代碼：

<div id="main"> 
    <div id="showFiltersDiv"> 
    </div> 
    <div id="filtersDiv"> 
     <div id="hideTextDiv"> 
     </div> 
    </div> 
    <div id="contentDiv"> 
     <div id="headlineDiv"> 
      Block 1</div> 
     <div id="storyDiv"> 
      Block 2</div> 
    </div> 
</div>

繼承人jQuery代碼：用於調整大小 - >

  $('#headlineDiv').resize(function() { 
      var offset = $('#headlineDiv').position(); 
      var height = $('#headlineDiv').height(); 
      var width = $('#contentDiv').width(); 
      var top = offset.top + height + "px"; 
      var newStoryHeight = $("#main").height() - $("#headlineDiv").height(); 
      var maxHeight = $("#main").height(); 

      $('#storyDiv').css({ 
       'bottom': 0, 
       'height': newStoryHeight, 
       'top': top, 
       'position': 'absolute', 
       'width': width 
      }); 

      $('#headlineDiv').css({ 
       'max-height': maxHeight, 
       'width': width 
      }); 
     });

爲#storyDiv的代碼是類似

繼承人的代碼，應該讓他們擴大，以適應額外的空間 -

   $('#showFiltersDiv').click(function() { 
      $('#filtersDiv, #hideTextDiv').show("slide", { direction: "left" }); 
      $('#showFiltersDiv').hide(); 
      var left_margin = $('#filtersDiv').width(); 
      var perm_width = $('#main').width() - left_margin;    
      var storyTop = $('#storyDiv').position().top; 
      $('#headlineDiv').width(perm_width); 
      $('#headlineDiv').css({ 
       'float': 'right', 
       'left': $('#main').width() - perm_width, 
       'position': 'absolute' 
       //'width': perm_width 
      }); 

      $('#storyDiv').css({ 
       'float': 'right', 
       'left': $('#main').width() - perm_width, 
       'position': 'absolute', 
       'width': perm_width 
      }); 
     });

時headlineDiv的大小時，應storyDiv相應地調整它的高度。他們的立場是可以互換的。所以如果用戶拖動上面的storyDiv，headlineDiv將被放置在它下面。因此，如果storyDiv被調整大小，則headlineDiv將相應地調整其高度。出於某種原因，當用戶試圖調整大小時，它們的寬度會減少10px左右。爲了解決這個問題，我將這些div的寬度設置爲等於它們在調整大小函數中的父級。

現在，filterDiv是一個切換div。所以當用戶隱藏它時，headlineDiv和storyDiv應該在左側展開並佔據新的空間。要做到這一點，我正在改變它們的寬度。但是，使用$('#headlineDiv ').width(newWidth)設置寬度不起作用。有什麼可以做的伎倆的任何建議？

來源

2012-03-06 neuDev33

圖片是好的，但一些代碼將是有益的，以及。 – 2012-03-06 21:44:14

你怎麼切換你的div？可見性或顯示？同樣在你的圖中，你將它們標記爲'headlineDiv'，'storyDiv'和'filerDiv'，但在你的描述中你可以稱它們爲'div1'' div2'和'div3'。這是有點含糊 – SupremeDud 2012-03-06 21:48:20

根據上述評論改變了問題 – neuDev33 2012-03-06 22:02:08

使用jQuery UI可調整大小。它有選項「alsoResize」建權，由於規則您提供不清楚，你可以在「alsoResize」你自己寫一個簡單的函數

http://jqueryui.com/demos/resizable/

來源

2012-03-06 21:56:42 charlietfl

我已經使用resizable。但是，因爲我在resize（）函數中明確地設置了寬度，所以它沒有所需的效果。 – neuDev33 2012-03-06 22:04:29

發表演示，然後在jsfiddle.net – charlietfl 2012-03-06 22:06:16

我在我的CSS中發現了一些錯誤，所以我正在重新編寫一些邏輯。根據你的建議，即時通訊嘗試首先使用可調整大小來實現這一點。但是，水平並排的兩個div都試圖擴展到彼此。繼承人jsfiddle：http://jsfiddle.net/kyS4f/ – neuDev33 2012-03-06 23:13:57

變化幅度，以$（ '＃contentDiv'）設置寬度（newWidth）不工作

回答

相關問題