使用同位素和Twitter的引導2.X popovers - 對飛

Question

井位，這是我第一次的問題 - 而可悲的是一個新手 - 但如果我帶你通過我的想法，我希望有人能幫助我延長我的技能和得到這個佈局排序？

• 我使用引導
• 在一個頁面中我有一系列與同位素（+無限滾動）
• 當用戶將鼠標懸停在每個格很好地工作的div的，我希望有一個酥料餅的顯示關於元素
• 更多的相關信息，我可以得到使用data-container="body"

到目前爲止好工作..

接下來，我發現每個元素的正確位置使用：

$('#container').isotope({ 
itemSelector: '.item', 
itemPositionDataEnabled: true 
}) 
// log position of each item 
.find('.item').each(function(){ 
var item_position = $(this).data('isotope-item-position'); 
console.log('item position is x: ' + item_position.x + ', 
y: ' + item_position.y);}); 

（從http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled）

，現在我已碰到的問題是如何影響酥料餅依賴的位置在同位素日誌是給我的值 - 因此如果一個元件被放置到最右邊的視口的 - 那麼酥料餅顯示向左或以下（不隱藏的視線之外）。

欣賞有這方面的幫助和指導 - 幾乎嘗試了我在這裏找到任何答案，但我不能讓他們的工作..

（我已經把一個快速的（出於某種原因同位素AINT工作）小提琴試圖解釋什麼，我想在這裏實現：http://jsfiddle.net/watcher/Kv8Bw/1/）

---

下一次嘗試後@Bass幫助：

@bass - 欣賞的幫助 - 但我認爲我的JS知識讓我到這裏（包括來自另一個答案有些邏輯 - [鏈接] Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?）已經在這個被撐着走：

$("#popover").popover({ 
trigger: "hover focus" 
}); 

var tmp = $.fn.popover.Constructor.prototype.show; 
$.fn.popover.Constructor.prototype.show = function() { 

var items = Array('top','bottom','left','right'); 
var position = $(this).data('isotope-item-position'); 

if (position.left > 515) { 
return "left"; 
} 

if (position.left < 515) { 
return "right"; 
} 

if (position.top < 110){ 
return "bottom"; 
} 

return "top"; 
} 


tmp.call(this); 

但我的問題是（我認爲同位素返回所有的值我的項目，而不是一個我上空盤旋 - 有什麼建議）

Answer 1

Callback function after tooltip/popover is created with twitter bootstrap?展示瞭如何exend的JavaScript？使用這個節目之前添加基於計算的位置放置：

var tmp = $.fn.popover.Constructor.prototype.show; 
$.fn.popover.Constructor.prototype.show = function() { 

    /* random placement add your calcuations based $(this).data('isotope-item-position'); on here: */ 
    var items = Array('top','bottom','left','right'); 
    this.options.placement = items[Math.floor(Math.random()*items.length)]; 
    // from: https://stackoverflow.com/questions/5915096/get-random-item-from-array-with-jquery 

    tmp.call(this); 
} 

見：http://bootply.com/66412

更新

在您的擴展顯示功能this.$element是由此引發的元素的引用酥料餅。你可以用它來獲取其位置（http://api.jquery.com/position/）。

var tmp = $.fn.popover.Constructor.prototype.show; 
$.fn.popover.Constructor.prototype.show = function() { 

var position = this.$element.position(); 
if(position.top<50){this.options.placement = 'bottom'} 
else if(position.top>150){this.options.placement = 'top'} 
else if(position.left<200){this.options.placement = 'right'} 
else {this.options.placement = 'left'} 

tmp.call(this); 
} 

見： http://bootply.com/66412（還更新）

https://stackoverflow.com/a/12656175/1596547將通過調用位置作爲函數給出一個更好的解決方案：

var options = { 
placement: function (context, source) { 
    var position = $(source).position(); 

    if (position.top < 100){ 
     return "bottom"; 
    } 

    if (position.top > 800){ 
     return "top"; 
    } 

    if (position.left > 484) { 
     return "left"; 
    } 

    //if (position.left < 485) { 
    else 
    { 
     return "right"; 
    } 

} 
, trigger: "click", 
title: 'popover', 
content: 'content of a popover' 
}; 
$('.element').popover(options); 
} 

popover()不是 '活' 的功能。當新元素插入到DOM時，您將不得不再次調用popover。請參閱http://www.infinite-scroll.com/「所有選項」無限滾動在新內容成功加載時具有可選的回調函數。使用此函數可以再次調用popover（）。請參閱：http://bootply.com/66524（bootply不要加載第二頁）。

完整的源：

function setpopover() 
{ 

    var options = { 
    placement: function (context, source) { 
     var position = $(source).position(); 

     if (position.top < 100){ 
      return "bottom"; 
     } 

     if (position.top > 800){ 
      return "top"; 
     } 

     if (position.left > 484) { 
      return "left"; 
     } 

     //if (position.left < 485) { 
     else 
     { 
      return "right"; 
     } 

    } 
    , trigger: "click", 
    title: 'popover', 
    content: 'content of a popover' 
    }; 
    $('.element').popover(options); 
} 


    $(function(){ 

     var $container = $('#container'); 

     $container.isotope({ 
     itemSelector : '.element', 
     itemPositionDataEnabled: true 
     }); 

     $container.infinitescroll({ 
     navSelector : '#page_nav', // selector for the paged navigation 
     nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.element',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/qkKy8.gif' 
      } 
     }, 
     // call Isotope as a callback 
     function(newElements) { 
      $container.isotope('appended', $(newElements)); 
      setpopover(); 
     } 
    ); 

    setpopover() 



    }); 

注意：你的元素的位置由jQuery的位置給予（）。這會給你一個元素相對於偏移父對象的當前位置。將它與.offset（）進行對比，該文件檢索相對於文檔的當前位置。見：http://api.jquery.com/position/。同位素項目位置將給出相同的位置。要設置相對可見的窗口的位置看到：

• Using jQuery to keep scrolling object within visible window
• Check if element is visible after scrolling

等