StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>OK, I found an answer that works. I'm not sure that it's the best way to go about it so I'll go ahead and leave it open in case someone else can find something better.</p> <p>First I did some more research and found the jQuery <code>offset()</code> function which lets me get the position of the link. From there I set the position of the div to the link. I had some issues with the hover being too picky about where the mouse was, so I created a large div that goes around the link with left padding so that the link itself wouldn't be hidden while the menu was shown and so that I could have a little bit of wiggle room outside the menu to keep it from disappearing. Changing the positioning and padding of the div will give more flexibility in how far the mouse can move before the menu fades out.</p> <p>Here's the <a href="http://jsfiddle.net/jRpyp/10/" rel="nofollow">fiddle</a>.</p> <p>And here's the code minus html/css:</p> <pre><code>$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | "); var popupPosition = $("#popup-link").offset(); // Edit positioning as needed //popupPosition.left += $("#popup-link").width(); $("#popup").offset(popupPosition); $("#popup").css("padding-left", $("#popup-link").width()); $("#popup").toggle(); $("#popup-link").hover( function(e) { $("#popup").show(); }, function(e) { //$("#popup").fadeOut("slow"); }); $("#popup").hover( function(e) { popupHovering = true; $("#popup").show(); }, function(e) { $("#popup").fadeOut("slow"); }); </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