StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded</p> </blockquote> <p>Haven't tested it but you should be able to just do this by sticking a couple of <code><img></code>s in with the same src as the background (with <code>display: none;</code> of course) and testing the .complete property of each image, on a short setInterval loop, until they're all loaded. Don't use onload, it tends to be unreliable on images.</p> <blockquote> <p>Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.</p> </blockquote> <p><strong>Justin</strong>'s solution should work for detecting when you're in a given section. Just set a flag to false before you do the softscroll, and true once it stops- and then only mark a section as active when the flag is true.</p> <p>I would "disable" the images by pointing their <code>src</code> attribute to a 1x1 blank gif, and setting their <code>data-src</code> attribute to the real src. Then just do something like:</p> <pre><code>$('.selected-section img').each(function () { $(this).attr('src', $(this).data('src')); }); </code></pre> <p>You'll have to be sure to set the size of the "disabled" images to the size that they'll be once their image has loaded, or else the page will jump around a lot.</p> <p>You <strong>could</strong> use the window.onscroll event handler to detect when you're scrolling, but this is generally a bad idea. For discussion on this see: <a href="http://ejohn.org/blog/learning-from-twitter/" rel="nofollow">http://ejohn.org/blog/learning-from-twitter/</a></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