Tự động thay đổi vị trí của cửa sổ phụ thuộc vào vị trí hiển thị

Question

Tôi muốn tự động thay đổi vị trí cửa sổ bật lên (trái/phải, trên cùng/dưới) tùy thuộc vào vị trí của phần tử trên màn hình.

//get_popover_placement(dom_el) returns 'left', 'right', 'top', or 'bottom' 
    function set_popover(dom_el) { 
    var the_placement = get_popover_placement(dom_el); 
    $(dom_el).popover({ 
     offset: 10, 
     placement: the_placement 
    }).popover('show'); 
} 

//set the placement on every hover 
$('a[data-rel=popover]').hover(function(){ 
     set_popover(this); 
    }, function(){}); 

Nó hoạt động lần đầu tiên, nhưng nếu vị trí của những thay đổi yếu tố (khi cửa sổ được thay đổi kích cỡ, ví dụ), vị trí không được cập nhật với các cuộc gọi tiếp theo để set_popover.

Tôi đã thêm một chút mã vào get_popover_placement để thêm đường viền màu khác với phần tử, tùy thuộc vào vị trí. Màu đường viền được cập nhật mỗi lần, cho biết mã đang được gọi và các tính toán đang được thực hiện chính xác, nhưng vị trí không được cập nhật.

Dường như tùy chọn vị trí chỉ có thể được đặt một lần. Làm thế nào tôi có thể vượt qua giới hạn này? Có một biến nào đó có thể được xóa để đặt lại cửa sổ bật lên không?

Answer 1

Hãy thử thay đổi này, bằng cách sử dụng .Trên() trong jQuery để đính kèm một người biết lắng nghe sự kiện:

Changed trả lời này bằng cách cập nhật Kevin Ansfield của - thêm mã đến chức năng vị trí.

$('a[data-rel=popover]').popover({ 
     placement: get_popover_placement 
    }); 

    function get_popover_placement(pop, dom_el) { 
     var width = window.innerWidth; 
     if (width<500) return 'bottom'; 
     var left_pos = $(dom_el).offset().left; 
     if (width - left_pos > 400) return 'right'; 
     return 'left'; 
    } 

Answer 2

Tôi vừa kiểm tra nguồn khởi động lại và nhận ra rằng các hàm được chuyển đến thuộc tính vị trí sẽ nhận được đối số đã qua. Tôi đã đạt được một điều tương tự với những gì bạn đang cố gắng, hãy thử những điều sau đây và xem nó có phù hợp với bạn không:

$('a[data-rel=popover]').popover({ 
    offset: 10, 
    placement: get_popover_placement 
}); 

function get_popover_placement(pop, dom_el) { 
    // your placement function code here 
}