將加載部分向下移動為 ajax 內容加載

Question

我為移動網站創建的表單顯示了基於先前選擇的新字段。 即 - 用戶從下拉菜單（日期）中選擇和選項，然后根據所選日期顯示一系列時間。 在選擇日期之前不會顯示時間。

我有一個旋轉的加載 div，而時間是通過 ajax 在后台加載的。我遇到的問題是，當“動作”發生在向下四分之三的地方時，加載 div 位於頁面頂部. 這個“動作”部分位於視口（它是一個移動網站）中，加載 div 位於頁面頂部 - 遠高於用戶視口。

我怎樣才能降低加載 div 以使其始終位於當前視口中？ 如何使加載 div 跟隨用戶當前正在考慮滾動條的表單中的位置？

我一直在嘗試使用垂直居中的 html/CSS model，如下所述： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

但它不起作用，並且當單擊表單元素時，頁面的中心似乎不會在每個事件中更新。 我想我需要使用表單字段的焦點或模糊事件來更新它並重新評估，但我似乎無法讓它工作。

有沒有人有關於每次頁面長度增加時如何將加載 div 移動到當前視口區域中心的提示？

Answer 1

如果您的加載 div 設計為位於文檔流內部 - 例如，表單中的新內容塊 - 最好使用 jQuery 將加載 div 插入內容本身。 否則將很難達到 position 像素完美。

如果加載 div 顯示為文檔的疊加層，那么您可以使用具有高z-index的fixed CSS 定位。 要使其在所有屏幕分辨率上居中，請使用 jQuery 和公式(window.height() - div.height())/2作為頂部像素 position。代碼將類似於此答案。

希望有幫助

Answer 2

如果你這樣做，並將 div 放在你的<body>標簽內，它會留在可見區域的中間。

div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}

另一種解決方案是將它放在將要加載的容器內容的末尾。 只要確保在它之前加載內容即可。 如果你給它一個margin:auto; 它會留在中間並繼續向下推。

編輯：這里的答案也值得注意。 這將防止以用戶無法修復的方式掩蓋一些重要的事情。

Answer 3

將加載 div 的 position 設置為固定，這當然會導致它從 DOM 結構中的父級轉義，然后您需要將 position 放在您想要的位置。 固定定位是相對於視口的可見區域。

<html>
<head>
<style type="text/css">
    #loader {
        height: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        background: #ccc;
    }
</style>
</head>
<body>
   <div id="loader">Loading...</div>
</body>
</html>

這將導致加載器 div 始終位於屏幕中心，無論用戶滾動到哪里，左/右上/下。

將加載部分向下移動為 ajax 內容加載

問題描述

3 個解決方案

解決方案1
1 已采納 2011-12-05 00:08:19

解決方案2
1 2011-12-05 00:14:52

解決方案3
0 2011-12-05 00:16:41

將加載部分向下移動為 ajax 內容加載

問題描述

3 個解決方案

解決方案1 1 已采納 2011-12-05 00:08:19

解決方案2 1 2011-12-05 00:14:52

解決方案3 0 2011-12-05 00:16:41

解決方案1
1 已采納 2011-12-05 00:08:19

解決方案2
1 2011-12-05 00:14:52

解決方案3
0 2011-12-05 00:16:41