2009-12-07 46 views
1

關注this,我想得到相同的效果,然後我想我只是改變我點擊div的寬度。試圖改變點擊寬度

我有一個左側sidebardiv和contentdiv在右側,我有一個onclick觸發器,它隱藏左側sidebardiv和設置正確的contentdiv寬度爲100%的圖像。
它確實隱藏了左側sidebardiv,但並沒有將contentdiv擴展到100%,當我按下firebug打開時,發生了一件奇怪的事情,剛打開contentdiv之後又擴展到100%,任何人都可以弄清楚我做錯了什麼?

謝謝

下面是一些HTML:

<div id="content_holder"> 
<div class="leftsidebar" id="sidebar"> 
.... 
</div> 
<div class="content" id="content"> 
.... 
</div> 
</div> 

這裏的javascript:

var flag = false; 

      Page.toogle = function(id) 
      { 
       var x = document.getElementById('content'); 
       if(!flag){ 
        document.getElementById(id).style.display = 'none'; 
        x.style.width = '99%'; 
          flag=1; 
       } 
       else { 
        x.style.width = '683px'; 
        document.getElementById(id).style.display = ''; 
          flag=0; 
       } 
      } 

leftsidebar被作爲參數傳遞給上面的函數傳遞

這裏是一些CSS:

div.content { 
     display: block; 
     float: left; 
     width: 683px; 
     text-align: left; 
     margin-left:10px; 
    } 

    div.leftsidebar { 
    padding-bottom:20px; 
    width:303px; 
    background: url('left_holder.png') left bottom no-repeat; 
} 

最新更新:

股利口延伸,因爲它應該當我點擊窗口恢復按鈕和背部。另外當我打開螢火蟲時,我提前說過。有沒有可以模擬此事件的JavaScript的一些破解?

更多信息

我發現了一些類似的帖子,如:

javascript resize event firing multiple times while dragging the resize handle - >我需要這種調整大小事件使格口延伸正確

+0

而不是告訴我們你有什麼,只是粘貼HTML ... – Faruz 2009-12-07 11:58:40

+0

能否請您發佈您的代碼?謝謝 – 2009-12-07 12:00:16

+0

你的CSS是什麼樣的? – luckykind 2009-12-07 13:01:42

回答

0

您應該能夠像觸發resize事件處理函數:

window.resizeBy(1,1); 
window.resizeBy(-1,-1); 
0

開火時,我觸發我Page.toogle功能這條線有錯誤:

if(x.style.width = '683px')

您需要兩個等號:

if(x.style.width == '683px')

+0

如果不與2等於一起工作,如果仍然沒有發生任何事去除..它不strech 100% – 2009-12-07 12:48:09

0

我認爲這是在您的來電Page.toogle

當我只是讓這個普通的函數像這裏http://jsbin.com/iyeka/edit它似乎工作就好了... ...

應該toogletoggle

+0

這只是函數名..不管我怎麼稱呼它,但是它是一個拼寫錯誤。我不是母語.. – 2009-12-07 14:48:28

+0

我打電話給img元素點擊,它確實執行,因爲它應該但我需要某種JavaScript hack來模擬窗口調整大小 – 2009-12-07 15:55:20

+0

我只是說你可能以不同的拼寫方式你稱它爲... – luckykind 2009-12-07 16:02:32

0

鑑於內容是浮動不是一個基於百分比的寬度將根據層次結構中最後一個父元素計算硬寬度,或者如果沒有它的內在寬度?

如果您給#contentholder px/pt/cm中的硬寬度,或者將您的動態寬度分配中的前一個單位替換爲內容,會發生什麼情況?

0

頁面瀏覽器很可能不會觸發瀏覽器的onresize事件。當你打開螢火蟲時,它會被你的resize事件處理程序捕獲。嘗試甚至調整頁面本身的大小,它也應該觸發。

發生這種情況是因爲您的div浮動,因此佈局不相對。一種解決方法是在調整leftdiv時手動觸發onresize事件。

+0

一種解決方案是在調整leftdiv時手動觸發onresize事件。 - >我怎麼能這樣做?這是我在找什麼? – 2009-12-08 08:43:46

0

這是我的建議。

  1. 使用jQuery而不是普通的舊javascript來做這種事情。瀏覽器瑕疵通常有內置的解決方法。

  2. 不要只是使用寬度屬性來改變寬度,而是用寬度設置創建一個CSS類,並使用jQuery切換div中的CSS類。

我修改了div之前,它對我來說工作得很好。但我一直使用jQuery來完成。

+0

#1。我無法使用jquery,因爲它與我當前的JavaScript框架原型 #2一致。我無法創建一個新的div,因爲我從服務器端預裝了這個div的內容.. – 2009-12-08 08:42:49

1

leftsidebar作爲參數傳遞 對上述功能

你傳遞的類的名稱,功能,而不是ID。