Vấn đề định vị ngày hội jQuery ui khi cuộn xuống trang web

Tôi có một trang web sử dụng nhiều phiên bản của trình đếm ngày tháng jQuery. Trang web của tôi sẽ hiển thị ~ 80 bản ghi mở rộng ra ngoài một ảnh chụp màn hình.Vấn đề định vị ngày hội jQuery ui khi cuộn xuống trang web

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

tôi đã thiết lập các giá trị mặc định của datepicker của tôi như sau:

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

Khi tải trang đầu tiên, nếu tôi nhấp vào bất kỳ biểu tượng datepicker rằng có thể nhìn thấy trên màn hình (tức mà không cần cuộn) sau đó các datepicker xuất hiện như mong đợi.

Tuy nhiên, nếu tôi cuộn xuống trang và sau đó nhấp vào biểu tượng ngày, biểu tượng ngày tháng sẽ không xuất hiện trong cửa sổ màn hình mà thay vào đó được hiển thị lại ngay gần đầu màn hình.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này?

Tôi đang sử dụng:

IE7
asp.net MVC
jquery.ui.datepicker.js (UI/API/1.8/datepicker)

Nguồn

2010-05-14 Alex P

Tôi nghĩ rằng tôi đã cố gắng giải quyết vấn đề của mình nhưng đồng thời tôi nghĩ rằng tôi có thể đã phát hiện ra một lỗi (?) Trong mã datepicker jquery ui.

Trước khi tôi tiến xa hơn, hãy để tôi chỉ nói rằng tôi mới sử dụng jquery/javascript và sẽ đánh giá cao bất kỳ đầu vào nào bên dưới.

Để tóm tắt lại vấn đề, tôi đang sử dụng asp.net mvc và tôi đang cố gắng hiển thị ~ 80 trình đặt ngày trên một trang. Đối với bất kỳ trình ghi ngày tháng nào trong chế độ xem ban đầu, vị trí của trình đặt ngày tháng đều tốt. Tuy nhiên, khi tôi di chuyển xuống datepickers vẫn còn được hiển thị gần phía trên cùng của màn hình.

Tôi bắt đầu xem mã nguồn và thực hiện một số gỡ lỗi. Những gì tôi nhận thấy là mức độ mà các datepicker đã được bù đắp về phía trên cùng của màn hình là tỷ lệ thuận với số tiền mà tôi đã di chuyển tức là nhiều hơn scroll = lớn hơn bù đắp.

Vấn đề then chốt trong đoạn code tôi tìm thấy (xem dưới đây) là khi các mã hoạt động ra nơi để vị trí datepicker nó không đưa vào tài khoản bao xa xuống màn hình người dùng đã cuộn:

_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 
     }

Trong dòng cuối cùng, phương thức offsetHeight không tính đến số lượng bạn đã cuộn xuống màn hình.

Nếu bạn cập nhật dòng này như sau thì điều này giải quyết vấn đề tôi đã nêu ra:

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

này chỉ đơn giản được vị trí thanh cuộn và thêm nó vào offsetHeight để có được vị trí chính xác.

Vì lợi ích của việc tiết lộ đầy đủ, tôi không chắc chắn lý do tại sao điều này hoạt động và sẽ đánh giá cao một số thông tin chi tiết.

Tôi đã dành ~ 3 ngày về vấn đề này và nghiên cứu web và đây là điều tốt nhất tôi có thể nghĩ ra.

Điều thú vị là, đã có một truy vấn tương tự trong các diễn đàn jquery:

Click here to view

Đọc báo cáo nó dường như gợi ý rằng các lỗi đã được cố định trong một phiên bản trước 1.8?

Cảm ơn

Nguồn

2010-05-21 07:50:45

theo chính xác những gì bạn đã làm, nhưng không thể giải quyết được vấn đề của tôi. Bất kì lời đề nghị nào? –

Tôi không có ý tưởng nào khác mà tôi sợ? Tôi lưu ý rằng một số câu trả lời khác là khá gần đây vì vậy có lẽ họ có thể giúp đỡ? –

@PanadolChong Somehow document.documentElement.scrollTop cũng không làm việc cho tôi, có thể vì nó nằm trong iframe, nhưng document.body.scrollTop đã làm việc. – gbs

Tôi không chắc chắn nếu điều này sẽ là vấn đề, nhưng bạn đang gắn datepicker một cách không chuẩn. Bạn không cần lặp lại với .each();

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

Ngoài ra, bạn nên luôn luôn đặt một tên thẻ trước một selector lớp bất cứ khi nào có thể, vì nó tăng tốc quá trình lựa chọn.

Nguồn

2010-05-14 15:10:57 Pickle

Cám ơn các mẹo sử dụng .each() và luôn đủ điều kiện để tăng tốc quá trình lựa chọn. Sau khi thực hiện những thay đổi đó, tôi vẫn gặp sự cố tôi đã mô tả trong bài đăng của mình. –

Điều này không giải quyết các câu hỏi/vấn đề áp phích. – andora

Tôi gặp phải vấn đề tương tự trên ứng dụng tôi đang tìm và tìm ra giải pháp. Ứng dụng không chứa đặc tả loại doc phù hợp và tất cả những gì cần thiết là thêm nó vào đầu trang.

<!DOCTYPE html>

Hy vọng điều này sẽ hữu ích.

Nguồn

2011-06-21 18:39:56

-1

datepicker-UI sổ popup có thể được thực hiện có thể kéo bằng cách thêm đoạn mã sau:.

$ ('# ui-datepicker-div') kéo();

Vì ID này áp dụng cho div thành phần được tạo cho tất cả trình đặt ngày trên cửa sổ bật lên trên trang. Trong khi:

$ ("ui-datepicker.") Kéo()

Áp dụng cho tất cả các datepickers trên một trang (cho dù popup hoặc inline).. Bằng cách làm cho bảng điều khiển có thể kéo được, bạn thường có thể định vị ngày tháng mà bạn muốn mà không cần cuộn.

Nguồn

2011-09-01 13:32:39 andora

đây không phải là câu trả lời! –

Tôi đã gặp phải những vấn đề này cũng như trong IE 9 và không thể cảm ơn đủ cho sự trợ giúp chung của bạn. Chrome 22.0.1229.94 m và FF 15.0.1 không hiển thị vấn đề này cho tôi.

đầu tiên tôi đã cố gắng buộc IE 8 thi đua với một thẻ meta

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

vô ích.

Sau đó, tôi đã chỉnh sửa tệp jquery.ui.datepicker.js như được đề xuất để điều chỉnh chiều cao vị trí bằng cách tính toán cuộn. Cái này cũng không làm việc.

Cuối cùng tôi đã thay đổi loại tài liệu của tôi từ

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

để

<!DOCTYPE html>

mà làm việc thành công !!

Tôi đã xóa thẻ meta buộc giả lập trình duyệt IE 8, nhưng giữ nguyên các thay đổi mà tôi đã thực hiện đối với tệp jp datepicker. Thành công của tôi có thể là kết hợp các js đã chỉnh sửa và thay đổi về loại tài liệu hoặc chỉ thay đổi về loại tài liệu.

Nguồn

2012-10-12 19:50:39 humbolight

thnkx, nó cũng giúp tôi! – vladimir

tôi đã cùng một vấn đề quá, tôi đang sử dụng IE9, nhưng thay vì sử dụng document.documentElement.scrollTop tôi sửa dòng follwing trên mã JS của tôi

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

Điều này là do document.documentElement.scrollTop trả về 0, đối với tôi là phá được mã trên vấn đề của tôi

Nguồn

2012-11-13 15:42:37

thực hiện chính xác những gì bạn đã làm, nhưng không thể giải quyết được sự cố của tôi. Bất kì lời đề nghị nào? –

Tôi cũng không nhận được một giá trị cho document.documentElement.scrollTop. Các bit của document.body.scrollTop trong câu trả lời này giải quyết vấn đề của tôi alright cho IE9 và IE8. – j4v1

Tôi gặp sự cố tương tự này với giao diện người dùng jQuery phiên bản 1.9.2 và IE9.

Dường như có một chức năng trong giao diện người dùng jQuery có tên _checkOffset có nghĩa là để giải quyết vấn đề này. Nó không hoạt động.

Nó cố gắng sử dụng $(document).scrollTop(), dường như luôn trả về 0 trong IE9. Thay vào đó, tôi phải thay đổi nội dung của hàm để sử dụng hàm document.body.scrollTop khi hàm jQuery trả về 0. Do đó thay thế

$(document).scrollTop()

với

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

ở khắp mọi nơi trong _checkOffset để 'sửa chữa' jQuery UI và làm cho nó hoạt động đúng.

Nguồn

2012-12-04 13:03:47

Có thể là ok, nhưng lưu ý rằng '||' hợp lý của bạn sẽ đánh giá bên phải của toán tử trong trường hợp '$ (document) .scrollTop()' trả về đúng 0. – Madbreaks

Hey đây là một trong những hack mà chúng ta có thể được sử dụng để giải quyết vấn đề này.

$(".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); 
} 
});

tặng một thử nó làm việc cho tôi :)

Nguồn

2013-06-04 19:32:28 apandey846

Lưu ý rằng '.ui-datepicker-trigger' phải được thay thế bằng bất kỳ tham chiếu nào của tiện ích biểu mẫu của bạn, ví dụ: '$ (" # mywidget ").' ... – fooquency

Ngoài ra '$ .browser.msie' sẽ không hoạt động với các phiên bản jQuery sau này - thay vào đó, điều này sẽ hoạt động:' navigator.userAgent.match (/ msie/i) ' – fooquency

Ngoài ra, tôi thấy tôi đã phải sử dụng 'document.body.scrollTop' thay vì' $ ('html'). ScrollTop() '. (Sử dụng IE8, có thể các bản phát hành khác cũng cần thay đổi này.) – fooquency

Trong Jquery.UI, chỉ cần cập nhật các chức năng _checkOffset, do đó viewHeight được thêm vào offset.top, trước khi bù đắp được trả về.
Script: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; 
},

Nguồn

2014-07-11 09:26:14

sử dụng mã này, tôi có thể khắc phục sự cố trong IE9 và sử dụng trình theo dõi ngày tháng jquery UI 1.9.2 –

đầu tiên đi đến đây và định dạng tập tin js của bạn trong Javascript Beautifier

sau đó đi đến xếp hàng không 445

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

Nguồn

2015-05-08 13:50:05 sanjay

Vấn đề định vị ngày hội jQuery ui khi cuộn xuống trang web

Trả lời

Các vấn đề liên quan