當向下滾動頁面時jQuery ui datepicker定位問題

我有一個使用jQuery ui datepicker的多個實例的網頁。我的網頁將顯示80個記錄，這些記錄超出了一個屏幕截圖。當向下滾動頁面時jQuery ui datepicker定位問題

<% foreach (var record in Model) { %> 
    <div class="recordname"><%=record.name%></div> 
    <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" })%> 
    // <-- additional html here --> 
<% } %>

我已經把我的日期選擇器的默認設置如下：

$(".date-pick").each(function() { 
    $(this).datepicker({ 
     dateFormat: 'dd M yy', 
     showOn: 'button', 
     buttonImage: '/Images/datepickericon.png', 
     buttonImageOnly: true 
     }); 
    });

當第一次加載頁面，如果我點擊任何日期選擇器圖標在屏幕上可見（即無需滾動），那麼日期選擇器按預期顯示。

但是，如果我向下滾動頁面，然後點擊日期選擇器圖標，在日期選擇器不會顯示在屏幕窗口而是呈現的右背部靠近屏幕的頂部。

任何想法如何解決這個問題？

我使用：

IE7
asp.net的MVC
jquery.ui.datepicker.js（UI/API/1.8 /日期選擇器）

來源

2010-05-14 Alex P

我想我已經成功地解決我的問題，但在同一時間，我想我可能已經發現在jQuery UI的日期選擇器代碼中的bug（？）。

之前，我去進一步然後讓我只想說，我是新來的jQuery/JavaScript的，並希望在以下任何輸入。

回顧一下這個問題，我使用asp.net mvc的，我試圖展現〜在頁面上80個datepickers。對於初始視口中的任何日期選擇器，日期選擇器位置正常。但是，當我向下滾動時，日期選擇器仍然呈現在屏幕的頂部附近。

我開始查看源代碼並進行一些調試。我注意到日期選擇器向屏幕頂部偏移的程度與我滾動的數量成正比，即更多滾動=更大的偏移量。

中，我發現代碼中的關鍵問題（見下文）是當代碼工作在什麼地方它沒有考慮到日期選擇器多遠下來的畫面，用戶已滾動的位置：

_showDatepicker: 
function(input) { 
     input = input.target || input; 
     //....more code... 

     if (!$.datepicker._pos) { // position below input 
     $.datepicker._pos = $.datepicker._findPos(input); 
     $.datepicker._pos[1] += input.offsetHeight; //add the height 
     }

在最後一行中，offsetHeight方法不考慮您向下滾動屏幕的次數。

如果更新了這條線以下，然後這個解決我所提出的問題：

$.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height

這只是獲取滾動條的位置，並把它添加到的offsetHeight，以獲得正確的位置。

爲了充分披露，我不完全確定這是爲什麼會起作用，並希望得到一些見解。

我已經在這個問題上花了大約3天的時間，並研究了網絡，這是我能想到的最好的。

有趣的是，在jQuery的論壇上類似的查詢：

Click here to view

閱讀它似乎表明，錯誤是固定在以前的版本到1.8報告嗎？

感謝

來源

2010-05-21 07:50:45

完全按照你做的，但沒有不能解決我的問題。任何建議？ – 2014-03-24 06:07:39

我沒有任何其他想法我害怕？我注意到其他一些答案是相當近的，所以也許他們可以提供幫助？ – 2014-03-24 18:51:52

@PanadolChong不知何故document.documentElement。scrollTop也不適合我，也許是因爲它在iframe中，但是document.body.scrollTop確實有效。 – gbs 2014-09-16 22:50:42

我不知道這是否會成爲問題，但是您將以非標準方式附加日期選擇器。你不需要迭代.each（）;

$("input.date-pick").datepicker({ 
    dateFormat: 'dd M yy', 
    showOn: 'button', 
    buttonImage: '/Images/datepickericon.png', 
    buttonImageOnly: true 
});

此外，您應該始終在類選擇器前面添加標記名稱，因爲它可以加快選擇過程。

來源

2010-05-14 15:10:57 Pickle

感謝您使用。每個提示（）並始終對標籤進行限定以加快選擇過程。做了這些改變後，我仍然遇到了我在帖子中描述的問題。 – 2010-05-14 15:37:31

這並沒有解決海報問題/問題。 – andora 2011-09-01 13:29:22

我也碰到過同樣的問題，在一個應用程序，我的工作並找到了解決辦法。該應用程序沒有包含適當的文檔類型規範，所需的只是將其添加到頁面的頂部。

<!DOCTYPE html>

希望這有助於。

來源

2011-06-21 18:39:56

-1

的日期選擇器-UI彈出可通過添加以下代碼進行拖動：

$（ '＃UI-日期選擇器-DIV'）可拖動（）;

由於此ID適用於爲頁面上的所有彈出日期選擇器創建的組件div，雖然：

$（「UI的日期選擇器。」）可拖動（）

適用於所有datepickers頁面上（無論是彈出式或嵌入式）。通過使面板可拖動，您通常可以將日期選擇器放在需要的位置而無需滾動。

來源

2011-09-01 13:32:39 andora

這不是一個答案！ – 2013-03-24 20:27:34

我在IE 9中遇到了這些問題，並且無法爲您的集體幫助感謝您。 Chrome 22.0.1229.94米和FF 15.0.1沒有出現這個問題。

我第一次嘗試迫使IE 8與仿真元標記

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

無濟於事。

然後，我編輯了jquery.ui.datepicker.js文件，建議通過計算滾動來調整位置高度。這也沒有用。

最後，我改變了我的doctype從

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

到

<!DOCTYPE html>

成功地工作！

我刪除了強制IE 8仿真的元標記，但保留了我對datepicker js文件所做的更改。我的成功可能是編輯的js和doctype中的更改的組合，或者只是doctype中的更改。

來源

2012-10-12 19:50:39 humbolight

thnkx，它也幫助我！ – vladimir 2015-04-27 09:50:49

我有同樣的問題，我一直在使用IE9，而是使用document.documentElement.scrollTop我在我的JS代碼編輯follwing線

$.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

這是因爲document.documentElement.scrollTop返回0，對我來說，上面的代碼解決了我的問題

來源

2012-11-13 15:42:37

完全按照你做的，但沒有不能解決我的問題。任何建議？ – 2014-03-24 06:17:29

我也沒有得到document.documentElement.scrollTop的值。在這個答案代碼document.body.scrollTop的位解決了我的問題好的IE9和IE8。 – j4v1 2015-07-15 23:35:25

我遇到了與jQuery UI版本1.9.2和IE9相同的問題。

在jQuery UI中似乎有一個名爲_checkOffset的功能，意在解決這個問題。它不起作用。

它試圖使用$(document).scrollTop()，它總是在IE9中返回0。我必須改變函數的內容才能使用document.body.scrollTop，而不是在jQuery函數返回零時使用。因此，與

($(document).scrollTop()||document.body.scrollTop)

在 _checkOffset

處處以取代

$(document).scrollTop()

來 '修復' jQuery用戶界面，並使其正常工作。

來源

2012-12-04 13:03:47

大概可以，但是請注意，在$（document）.scrollTop（）'正確返回零的情況下，你的邏輯'||'將會計算到操作符的右側。 – Madbreaks 2013-11-05 21:41:02

嘿，這裏有一個黑客可以用來解決這個問題。

$(".ui-datepicker-trigger").on("click", function() { 
var self; 
if ($.browser.msie) { 
self = $(this); 
$("#ui-datepicker-div").hide(); 
setTimeout(function(){ 
$("#ui-datepicker-div").css({ 
top: self.offset().top + $('html').scrollTop() + 30 
}); 
$("#ui-datepicker-div").show(); 
}, 0); 
} 
});

給一個嘗試它爲我工作:)

來源

2013-06-04 19:32:28 apandey846

請注意，'.ui-datepicker-trigger'應該替換爲您的表單構件參考的任何內容，例如。 '$（「＃mywidget」）。'... – fooquency 2013-11-11 14:21:55

此外，'$ .browser.msie'不適用於後來的jQuery版本 - 相反，這應該工作：'navigator.userAgent.match（/ msie/i） – fooquency 2013-11-11 14:28:44

另外，我發現我不得不使用'document.body.scrollTop'而不是'$（'html'）。scrollTop（）'。（使用IE8，可能其他版本也需要此更改。） – fooquency 2013-11-11 14:37:48

在Jquery.UI，只需更新_checkOffset功能，使被添加到viewHeight offset.top，抵銷前返回。
腳本：datepicker.js

_checkOffset: function(inst, offset, isFixed) { 
    var dpWidth = inst.dpDiv.outerWidth(); 
    var dpHeight = inst.dpDiv.outerHeight(); 
    var inputWidth = inst.input ? inst.input.outerWidth() : 0; 
    var inputHeight = inst.input ? inst.input.outerHeight() : 0; 
    var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()); 
    var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop)); 

    offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0); 
    offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0; 
    offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0; 

    // now check if datepicker is showing outside window viewport - move to a better place if so. 
    offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? 
       Math.abs(offset.left + dpWidth - viewWidth) : 0); 
    offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? 
       Math.abs(dpHeight + inputHeight) : 0); 
    offset.top = offset.top + viewHeight; 

    return offset; 
},

來源

2014-07-11 09:26:14

使用此代碼，我可以解決在IE9中的問題，並使用jQuery UI 1.9.2 datepicker – 2015-02-13 07:27:35

先去這裏和Javascript Beautifier

格式化你的js文件然後去排隊沒有445

k = k + document.body.scrollTop; 
change this line as 
k = k ;

來源

2015-05-08 13:50:05 sanjay

當向下滾動頁面時jQuery ui datepicker定位問題

回答

相關問題