Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is the code I ended up with. It's working perfectly, and it's about a quarter of the size of the original code.</p> <pre><code>$(document).ready(function() { // assign section IDs var sectionID = 0; $('section').each(function() { $(this).attr('id', 's' + sectionID); sectionID++; }); // assign element IDs, add to array var content = new Array(); var contentID = 0; $('section &gt; *').each(function() { $(this).attr('id', contentID); content[contentID] = new Array($(this).parent('section').attr('id'), $(this)); contentID++; }); // display elements var display = function() { // determine center var center = parseInt($(document.elementFromPoint(parseInt($(window).width() / 2), parseInt($(window).height() / 2))).closest('section &gt; *').attr('id')); // determine first/last var first, last; if (!isNaN(center)) { first = ((center - 20) &lt; 0) ? 0 : (center - 20); last = ((center + 20) &gt; content.length) ? content.length : (center + 20); } // hide $('section &gt; *').each(function() { var id = $(this).attr('id'); if (id &lt; first || id &gt; last) { $(this).remove(); } }); // show var start = $('section &gt; *').first().attr('id') - 1; for (var i = start; i &gt;= first; i--) { $('section#' + content[i][0]).prepend(content[i][1]); } var end = parseInt($('section &gt; *').last().attr('id')) + 1; for (var i = end; i &lt;= last; i++) { $('section#' + content[i][0]).append(content[i][1]); } } // listeners $(window).load(function() { display(); }); $(window).scroll(function() { display(); }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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