Databases
StackOverflow2013
Postsdbo
POCan't get .offset() method to work when iterating over a set of list items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't get .offset() method to work when iterating over a set of list items
    text
    copied!<p>Essentially, I'm trying to apply a tooltip-like popup on click to a set of list items. Everything seems to be working fine except the positioning of the popup. I'm trying to use <code>.offset()</code> to grab the coordinates of each list item so that I can position the popup div relative to the list item. I've included the pertinent html elements, css and my script below. Any help would be much appreciated! </p> <p>HTML:</p> <pre><code>&lt;ul&gt; &lt;li class="checked" title="This is a test popup message"&gt;Yada yada yada&lt;/li&gt; &lt;li class="checked" title="This is another test popup message"&gt;Yada yada yada&lt;/li&gt; &lt;li class="checked" title="This is yet another test popup message"&gt;Yada yada yada&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>CSS:</p> <pre><code>.popup { position: absolute; width: 300px; padding: 20px; background: rgba(0,0,0, .5); z-index: 10000; display: none; } </code></pre> <p>JavaScript:</p> <pre><code>$(document).ready(function() { activatePopup = function() { var popupMarkup = '&lt;div class="popup"&gt;' + '&lt;/div&gt;'; return popupMarkup; } $('body').prepend(activatePopup()); $('.checked').each(function() { // Sets popup text based on title attribute var popup = $('.popup'); var popupText = $(this).attr('title'); $(this).attr('title', ''); //Grabs Position data of trigger element var pos = $(this).offset(); var posTop = pos.top; var posLeft = pos.left; $(this).click(function() { popup.html(popupText); if (popup.is(":hidden")) { popup.fadeIn('fast'); } else { popup.fadeOut('fast'); } $(this).toggleClass('unchecked'); $(this).toggleClass('checked'); setPos(posTop, posLeft); }); setPos = function(top, left) { var yPos = (top - 80) + 'px'; var xPos = (left + 40) + 'px'; popup.css({'top' : yPos, 'left' : xPos}); } }); }); </code></pre>
 

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