Infinite Scroller Image Gallery

[2020-05-23] :: #2

by Snj

HTML

<a href="javascript:void(0)" class="openbtn" onclick="openNavT()">⍽</a>
    <div id="mywrapper" class="mywrapper">
      <div id="myNavT" class="overlay">
        <header>
          <div id="header_info" class="header--page-info my-font">
            <p id="header_pagetitle" class="info__pagetitle"></p>
            <div id="box_pagenr" class="info__pagenr">
              <p id="header_pagenr_start" class="start__pagenr">[ Page: </p>
              <p id="header_pagenr_curr" class="curr__pagenr" data-before="" data-after=""></p>
              <p id="header_pagenr_end" class="end__pagenr"></p>
            </div>
            <p id="header_loadedimgs" class="info__loadedimgs"></p>
          </div>
          <nav>
            <div id="inputSlider_div" class="inputslider">
              <input type="range" class="myrange" id="myrange" min="100" max="500" value="222" data-opacity="0">
              <a href="javascript:void(0)" class="closebtn my-font" onclick="closeNavT()">&times;</a>
            </div>
            <button id="checkButton" onclick="run_check_btn()" class="checkButton my-font">Run/Check</button>
            <!-- <input type="checkbox" class="mycheckbox my-font" id="scrollreverse" name="scrollreverse" value="reverse">
            <label for="scrollreverse" class="my-font">Reversed</label> -->
          </nav>
        </header>
        <div class="overlay-content">
          <div id="mycontainer" class="mycontainer">
          </div>
        </div>
      </div>
    </div>

CSS

:root {
  --size: 260px;
  --range-thumb-opacity: 0 }
*, * ::before, * ::after { box-sizing: border-box; }

/* body {
  background-color: #ecf0f1;
  font-family: monospace;
  font-size: 16px;
  overflow: hide; } */

.my-font {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  letter-spacing: 0.4px;
  word-spacing: 5.2px;
  font-weight: 700;
  color: rgb(189, 183, 171);
  font-style: inherit;
  font-variant: normal;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s;
  text-shadow: rgba(51, 40, 39, 0.64) -4px 4px 11px, rgba(94, 47, 55, 0.71) -1px 3px 15px; }

.openbtn {
  position: fixed;
  z-index: 6;
  top: 0;
  right: 25px;
  width: 1em;
  cursor: pointer;
  text-align: center;
  font-size: 45px;
  text-decoration: none;
  transition: all .3s ease;
  color: rgba(201, 201, 201, 0.57);
  background-color: rgba(23, 23, 23, 0.22);
  text-shadow: 0px 0px 6px rgba(3, 6, 4, 0.45); }
  .openbtn:hover,
  .openbtn:focus {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.3);
    text-shadow: 0px 0px 3px rgba(74, 207, 118, 0.68); }

.closebtn {
  padding: 12px 25px 0px 25px;
  font-size: 40px;
  line-height: 0;
  transition: all .3s ease; }
  .closebtn:hover,
  .closebtn:focus {
    color: hsl(0, 0%, 80%);
    text-shadow: 2px -2px 15px rgba(141, 33, 23, 0.70), -2px 2px 15px rgba(141, 33, 23, 0.70); }

.inputslider {
  display: flex; 
  --size: 222px;
  transition: 0.5s filter linear; }

.myrange {
  flex-grow: 2;
  /* filter: opacity(0) blur(20px) invert(0.9); */
  transition: 0.5s filter linear; }

.checkButton {
  position: absolute;
  padding: 0.5em 1em 0.5em 1em;
  margin: -2.5rem -2rem;
  font-size: 15px;
  font-weight: 550;
  border: solid 1px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-color: rgb(94, 93, 92);
  background-color: rgba(62, 65, 67, 0.67);
  box-shadow: rgba(80, 60, 59, 0.48) 0px 6px 20px 2px; }
  .checkButton:hover {
    cursor: pointer; 
    color: rgb(204, 204,...

JavaScript

$(".openbtn").hide();
$(document).keyup(function(e){ if(e.keyCode === 27) { closeNavT(); } });

var thread_title = " --snj--------- Sticky Header Scroll Gallery --------- ";
$("#header_pagetitle").text(`::[ ${thread_title} ]::`).css("transform", "scaleY(1)");
$("#header_pagenr_end").text(" / ∞ ]");

function run_check_btn() {
  $("#checkButton").css("opacity", 0);
  document.body.style.setProperty("--range-thumb-opacity", 1);
  populate();
}

function openNavT() {
    $(".openbtn").hide();
    $("body").css("overflow-y", "hidden");
    $("#mywrapper").show(); 
    $("#myNavT").css("width", "100%");
    //$("#myNavT").prependTo($("#myNavT").parent()); 
    $(".closebtn").show(); }

function closeNavT() {
    $("#myNavT").css("width", "0%");
    $("#mywrapper").hide(); 
    $("body").css("overflow-y", "auto");
    $(".openbtn").show();
    $(".closebtn").hide(); }

$(document).on('input', '#myrange', function() { document.body.style.setProperty("--size", this.value + "px"); });

function get_scrolled_amount() {
  return ($("#myNavT").scrollTop() / $("#mycontainer").height()) * 100;
}

function get_img_selectors(selector='.img_div') {
  img_elements =  [];
  document.querySelectorAll(selector).forEach(img => { img_elements.push(img); });
  return img_elements;
}


function pagenumber_updater(nrofsec) {
  //$("#header_pagenr_curr").text(nrofsec);
  $("#box_pagenr").css("transform", "scaleY(1)");
  var ip_curr = document.querySelector("p.curr__pagenr");
  ip_curr.textContent = nrofsec;
  ip_curr.classList.remove("notiflash");
  void ip_curr.offsetWidth;
  ip_curr.classList.add("notiflash");
}


function populate() {
  var rand_x, rand_y;
  var nrofsec = $("#mycontainer").find("section").length;
  nrofsec++
  pagenumber_updater(nrofsec);
  
  var temp_section = $(`<section id='sec_pgnr_${nrofsec}' class='notyetloaded'></section>`);
  temp_section.append($(`<p id="p_pgnr_${nrofsec}" class="my-font">Page #${nrofsec}</p>`));
  var temp_imgbox = $("<div...