將div下載爲ajax內容加載

我爲移動網站創建的表單顯示基於先前選擇的新字段。 I.E - 用戶從下拉菜單（日期）中選擇並選擇，然後根據選定的日期顯示一系列時間。時間直到選定日期才顯示出來。將div下載爲ajax內容加載

我有一個自旋加載div，而時間通過AJAX在後臺加載。我遇到的問題是當「行動」發生在大約三分之三的時候，加載div位於頁面的頂部。這個'action'部分位於視口中（這是一個移動網站），加載div位於頁面頂部 - 遠高於用戶視口。

我怎樣才能讓加載div下降，使它始終在當前的視口？我怎樣才能讓加載div在用戶當前正在考慮滾動條的形式跟隨地點？

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

但它不工作和頁面的中心似乎並沒有在每次活動時，形式更新元素被點擊。我想我需要使用焦點或模糊事件的表單字段來更新這個和reasses，但我似乎無法得到它的工作。

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

感謝

來源

2011-12-04 timmackay

如果您加載格的設計是公文流轉中 - 例如表單中的新內容塊 - 最好使用jQuery將內容加載到內容本身中。否則將很難將其定位爲像素完美。

如果加載div要作爲覆蓋文件顯示，那麼您可以使用fixed CSS定位，並將其設置爲z-index。要將其集中在所有屏幕分辨率上，請使用jQuery和公式(window.height() - div.height())/2作爲頂部像素位置。該代碼將類似於this answer。

希望幫助

來源

2011-12-05 00:08:19 Tak

它看起來像固定的定位是要走的路 - 感謝您的回答和背景的討論環節。 – timmackay

感謝您的幫助和解答。我將你的標記標記爲正確，因爲提到了固定位置，前一個線索和公式的鏈接。所有的答案對解決我的問題都非常有幫助。乾杯。 – timmackay

如果你做這樣的事情，並把你的div標籤<body>裏面，它會留在可見光區的中間。

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

另一種解決方法是把它放在容器內容的最後會加載進去。只要確保在它之前加載內容。如果你給它一個margin:auto;它會保持在中間，並繼續推下去。

編輯：這也是值得注意的答案here。這將防止以用戶無法修復的方式遮蓋重要的事物。

來源

2011-12-05 00:14:52 FakeRainBrigand

這實際上是在保證裝載一個非常優雅的方式爲最新內容的底部。再次，看起來像固定定位是一條路。謝謝。 – timmackay

謝謝你，你的答案是真正有用的，我標誌着另一個是正確的，因爲鏈接到較早線程和公式但均在解決問題非常有幫助。再次感謝。 – timmackay

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

<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始終居中在屏幕上，無論用戶在哪裏滾動，左/右上/下。

來源

2011-12-05 00:16:41

將div下載爲ajax內容加載

回答

相關問題