StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Prototype's <a href="http://prototypejs.org/api/element" rel="nofollow noreferrer">Element library</a> is one of the most powerful query libraries in terms of the methods. I recommend you to check out the API.</p> <p>A few hints:</p> <ol> <li><p>Checking visibility can be a pain, but you can use the <code>Element.getStyle()</code> method and <code>Element.visible()</code> methods combined into a custom function. With <code>getStyle()</code> you can check the actual computed style.</p></li> <li><p>I don't know exactly what you mean by "underneath" :) If you meant by it has a specific ancestor, for example, a wrapper div, you can use <code>Element.up(cssRule)</code>:</p> <pre><code>var child = $("myparagraph"); if(!child.up("mywrapper")){ // I lost my mom! } else { // I found my mom! } </code></pre> <p>If you want to check the siblings of the child element you can do that too:</p> <pre><code>var child = $("myparagraph"); if(!child.previous("mywrapper")){ // I lost my bro! } else { // I found my bro! } </code></pre></li> <li><p>Again, Element lib can help you if I understand correctly what you mean :) You can check the actual <a href="http://prototypejs.org/api/document/viewport" rel="nofollow noreferrer">dimensions of the viewport</a> and the <a href="http://prototypejs.org/api/element/cumulativeoffset" rel="nofollow noreferrer">offset of your element</a> so you can calculate if your element is "off screen".</p></li> </ol> <p>Good luck!</p> <p>I pasted a test case for prototypejs at <a href="http://gist.github.com/117125" rel="nofollow noreferrer">http://gist.github.com/117125</a>. It seems in your case we simply cannot trust in <code>getStyle()</code> at all. For maximizing the reliability of the isMyElementReallyVisible function you should combine the following:</p> <ul> <li>Checking the computed style (dojo has a nice <a href="https://github.com/dojo/dojo/blob/master/dom-style.js#L23" rel="nofollow noreferrer">implementation</a> that you can borrow)</li> <li>Checking the viewportoffset (prototype native method)</li> <li>Checking the z-index for the "beneath" problem (under Internet Explorer it may be buggy)</li> </ul>

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