StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You will want to set the position of the floating to to:</p> <pre><code>position:absolute; </code></pre> <p>Then set the left and top of the div to some location near the 'gear', you can get the position from the position method.</p> <pre><code>var node = $('#gear'); var position = node.position(); var dialog = $("#dialog"); dialog.css("left", position.left); dialog.css("top", position.top); dialog.fadeIn("fast"); </code></pre> <p>Something similar to this might work.</p> <p><strong>Edit:</strong> This has some flaws, after a resize the dialog will be out of position, the reason you see the original div so close to the 'gear' is because they use position:relative on the gear and then position the dialog absolutely. </p> <p>When an element is absolutely positioned from within an element that is already relatively or absolutely positioned it is now positioned relatively to it's parent element rather than the window element</p> <p>Dialog is positioned 10px relative to the top left of the #gear div:</p> <pre><code><div style="position:relative" id="gear"> <div style="position:absolute;top:10px;left:10px" id="dialog"></div> </div> </code></pre> <p>Dialog is positioned relative to the top left of the window:</p> <pre><code><div id="gear"> <div style="position:absolute;top:10px;left:10px" id="dialog"></div> </div> </code></pre> <p>There is probably no reason not to move the dialog to a position within the gear before it is displayed, just append the dialog within the gear, $("#gear").append($("#dialog"))</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