Databases
StackOverflow2013
Postsdbo
POUsing isotope and Twitter's Bootstrap 2.x popovers - placement on the fly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing isotope and Twitter's Bootstrap 2.x popovers - placement on the fly
    text
    copied!<p>Well, here's my first ever question - and sadly a newbie - but if i take you through my thinking i'm hoping someone can help me extend my skills and get this layout sorted?</p> <ul> <li>i'm using bootstrap</li> <li>in one page i have a series of divs that work perfectly with isotope ( + infinite scroll )</li> <li>as a user hovers over each div, i want a popover to display more info about the element</li> <li>this i can get to work using <code>data-container="body"</code></li> </ul> <p>So far so good..</p> <p>Next i found out the correct placement of each of the elements using:</p> <pre><code> $('#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);}); </code></pre> <p>(from <a href="http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled" rel="nofollow noreferrer">http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled</a> )</p> <p>So now the issue i've come up against is how to affect the placement of the popover dependent on the values the isotope log is giving me - thus if a element is placed to the far right of the viewport - then the popover displays to the left or below (and not hidden out of sight).</p> <p>Appreciate any help and guidance on this - pretty much tried any answers i've found here but i can't get them to work.. </p> <p>(I've put together a quick (and for some reason the isotope aint working) fiddle to try to explain what i am trying to achieve here: <a href="http://jsfiddle.net/watcher/Kv8Bw/1/" rel="nofollow noreferrer">http://jsfiddle.net/watcher/Kv8Bw/1/</a> )</p> <hr> <p><strong>Next attempt post @Bass help :</strong></p> <p>@bass - Appreciate the help - but i think my js knowledge is letting me down here (included some logic from another answer - [link]<a href="https://stackoverflow.com/questions/9956958/changing-the-position-of-bootstrap-popovers-based-on-the-popovers-x-position-in?rq=1">Changing the position of Bootstrap popovers based on the popover&#39;s X position in relation to window edge?</a> ) have been pluggin away at this: </p> <pre><code> $("#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 &gt; 515) { return "left"; } if (position.left &lt; 515) { return "right"; } if (position.top &lt; 110){ return "bottom"; } return "top"; } tmp.call(this); </code></pre> <p>But my issue is (i think that the isotope is returning the values of ALL my items rather than the one i am hovering over - any suggestions?)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload