2015-05-28 92 views
1

我對jQuery有一個很小的問題。我正在使用最新版本的HighCharts jQuery庫(http://www.highcharts.com/)在我的項目上生成圖表。由於我不想在同一頁面中提供數十張圖表,因此我將它們分成了可用slideUp和slideDown效果打開/關閉的選項卡。一切都很好,但這只是一個非常小的問題。jQuery - Div不適合頁面內容

只要我加載頁面默認選項卡選擇正確,我通常可以看到圖形。當我點擊另一個選項卡時,前面的一個slideDown與此同時所選的一個slideUp出現問題。裏面的圖總是佔用頁面寬度的310px,這就是爲什麼。

<div style="min-width: 310px; max-width: auto; height: auto; margin: 0 auto" id="container3" data-highcharts-chart="3"></div> 

這是包含圖形的股利,正如你可以看到有屬性最小寬度:310px最大寬度:汽車。在我看來,jQuery實際上只是在我調整頁面大小時立即「捕捉」回佔用100%頁面寬度的位置。當我簡單地打開FireBug時也是如此。只要FireBug打開圖形「捕捉」並填充div。

可悲的是我無法提供代碼,因爲它是一個Smarty + Jquery + PHP + MySQL項目,所有這些都在框架內部,我無法隔離問題。我應該如何「刷新」或「刷新」最小寬度/最大寬度?

謝謝您的時間

回答

3

有一兩件事你可以嘗試是隻呈現圖表一旦標籤已被打開,例如:

$(".tab-selector").slideDown("slow", function() { 
    // Animation complete. Render chart here 

    }); 

哈克的解決辦法是調用瀏覽器調整大小在動畫完成處理程序中的事件將與您手動調整瀏覽器的大小相同。

$(".tab-selector").slideDown("slow", function() { 
    // Animation complete. 
    $(window).trigger('resize'); 
}); 

很抱歉,如果這並不能幫助所有,很難知道你的問題沒有一個明確的運行實例的確切原因。

+0

這兩種解決方案都是正確的。精湛:)謝謝。 – user1274113