離屏切換顯示不顯示

我們正在努力將HighCharts整合到我們現有的ASP.NET網站中，並且遇到了一個已知的錯誤。這個錯誤是最初設置爲顯示的元素：無，然後切換爲顯示不正確，因爲某些瀏覽器無法計算隱藏對象的尺寸（例如IE8）。此修復程序提出here和here（在bottomof頁）是這樣做：離屏切換顯示不顯示

.hidden-container { 
    position: absolute; 
    top: -9999em; 
}

這是一切都很好，如果你正在使用jQuery的CSS設置的位置。我們設定在代碼中的位置和其他屬性後面，如：

If showExpanded Then 
     collapsedPanel.Style.Item("Display") = "none" 
     expandedPanel.Style.Item("Display") = "block" 
    Else 
     collapsedPanel.Style.Item("Display") = "block" 
     expandedPanel.Style.Item("Display") = "none" 
    End If

這我可以編輯這些圖表面板是這樣的：

If showExpanded Then 
     collapsedPanel.Style.Item("Display") = "none" 
     expandedPanel.Style.Item("Display") = "block" 
    Else 
     collapsedPanel.Style.Item("Display") = "block" 
     expandedPanel.Style.Item("position") = "absolute" 
     expandedPanel.Style.Item("top") = "-9999em" 
    End If

我們切換隱藏/顯示面板，像這樣在JavaScript文件：

function showHidePanelToggle(ctlID, sPnlID, hPnlID) { 
    var chkBoxID = $('#' + chkID); 
    var controlID = $('#' + ctlID); 
    var showPanelID = $('#' + sPnlID); 
    var hidePanelID = $('#' + hPnlID); 
    if (controlID.attr('type') == 'checkbox') { 
     chkID = false; 
     if (controlID.is(':checked')) { 
      showPanelID.slideUp('normal'); 
      hidePanelID.slideDown('normal'); 
     } 
     else { 
      showPanelID.slideDown('normal'); 
      hidePanelID.slideUp('normal'); 
     } 
    } 
    else { 
     ctlID = false; 
     if ((hidePanelID).is(':hidden')) { 
      showPanelID.slideUp('normal'); 
      hidePanelID.slideDown('normal'); 
      chkBoxID.attr('checked', true); 
      return false; 
     } 
     else { 
      showPanelID.slideDown('normal'); 
      hidePanelID.slideUp('normal'); 
      chkBoxID.attr('checked', false); 
      return false; 
     } 
    } 
}

我已經添加了檢查，看看如果我在那些特殊（圖）面板和我這樣做：

if ((hidePanelID).position(':absolute')) { 
       showPanelID.slideUp('normal'); 
       hidePanelID.slideDown('normal'); 
       chkBoxID.attr('checked', true); 
       return false; 
      } 
      else { 
       showPanelID.slideDown('normal'); 
       hidePanelID.slideUp('normal'); 
       chkBoxID.attr('checked', false); 
       return false; 
      }

這不是重新顯示我的面板（我猜是因爲它仍然設置爲-9999em。

我的問題是，我如何讓我的離屏面板正確顯示？不幸的是，我們沒有使用jQuery CSS文件來設置隱藏/顯示，並且重寫整個系統來使用這個新的CSS是非常不方便的。

來源

2012-05-15 wergeld

嘗試重置的代碼塊中的「位置」和「頂部」值返回到它們的默認值，：

If showExpanded Then 
    collapsedPanel.Style.Item("Display") = "none" 
    expandedPanel.Style.Item("Display") = "block" // No need for this line? 
    expandedPanel.Style.Item("position") = "static" 
    expandedPanel.Style.Item("top") = "auto" 
Else 
    collapsedPanel.Style.Item("Display") = "block" 
    expandedPanel.Style.Item("position") = "absolute" 
    expandedPanel.Style.Item("top") = "-9999em" 
End If

來源

2012-07-06 11:52:55 martinedwards

離屏切換顯示不顯示

回答

相關問題