StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem with your approach is, you only have one <code>highlight</code> element.</p> <p>So just like the scenario you are having issues with, you don't have a way to fire a <code>mouseout</code> event while staying <strong>inside</strong> the area.</p> <p>My suggested approach would be to actually scan through all visible elements first.</p> <p>For each visible element, make a dummy <code><div></code> which has the exact same <code>top, left,</code><strong><code>outerWidth</code></strong>, <strong><code>outerHeight</code></strong><code>, offset and z-index</code>.</p> <p>In other words, <strong>make a very shallow copy of the entire structure, the extreme opposite of a deep clone</strong>.</p> <p>Also, if you think my suggestion fits as an answer, I have one more minor suggestion. Search for the smartresize plugin, and on resize of your iframe that has percentage/flexible widths, recalculate the div dimensions and positions. I'll leave that to you.</p> <hr> <p><strong>DEMO</strong>: <a href="http://jsfiddle.net/terryyounghk/Mh6Hf/" rel="nofollow">http://jsfiddle.net/terryyounghk/Mh6Hf/</a></p> <pre><code>var $viewFrame = $('div.viewport-container iframe.output-frame').contents(), $visibles = $viewFrame.find('*:not(html body)').filter(':visible'), $viewContainer = $('div.viewport-container'), $overlayElements = $visibles.map(function (i, el) { var $el = $(el), $overlayEl = $('<div>'); $overlayEl.addClass('overlay') // this is our identifier // we need { width:.., height:.., left:.., top:.., z-index:...} .css($.extend({ position: 'absolute', width: $el.outerWidth(), height: $el.outerHeight(), 'z-index': $el.css('z-index') }, $el.offset())); $el.data('overlay', $overlayEl); // now the actual object has reference to the overlay $overlayEl.data('element', $el); // vice versa, now the overlay has reference to the actual object // you can do more stuff here... return $overlayEl.get(); }); $overlayElements.appendTo($viewContainer) .hover( function () { $(this).addClass('highlight'); }, function () { $(this).removeClass('highlight'); } ); </code></pre> <p>And I made one change in the CSS</p> <pre><code>... /*div.element-highlight removed*/ div.highlight { /*display: hidden;*/ /* <---- removed */ position: absolute; background-color: yellow; opacity: 0.5; cursor: default; pointer-events: auto; } </code></pre> <p>And one change to the HTML (inner DIV removed)</p> <pre><code><div class=element-highlight></div> </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