We Keep Coding

How to make horizontal margin between images constant in mosaic

I am trying to replicate a mosaic that can be found on many webpages. While looking for solutions to my problem I came accross a very good implementation on squarespace seen at https://native-demo.squarespace.com/images-native/. I have hosted my website containing the mosaic at http://alexstiles.000webhostapp.com.
My issue is that when you resize the window the horizontal spacing between the images flucuates like it has an animation instead of staying consistient. Although it sorts itself out if you resize slowly, rapid movements can cause the margin to be to large or small. This behavior is not present in the squarespace template. How can I remove this and make the margin consistient when resizing? I have already tried using css margins instead of javascript. I have added the javascript below to help.
let mosaic = document.getElementsByClassName("mosaic")[0]; // For a single mosaic for now
let numImages = 12;
let imageTopic = "design";
let originalImageTopic = "design";
let rowWidth = 3;
let scale = 1;
let mosaicLoader = document.getElementsByClassName("loader-container")[0]
let search = document.getElementById("search");
let searchBtn = document.getElementById("search-button");
let form = document.getElementsByTagName("form")[0];
function rem(rems) {
return rems * (16 * scale);
}
searchBtn.addEventListener("click", function(event) {
event.preventDefault();
searchResult(search.value);
});
search.addEventListener("click", function() {
form.classList.add("focused");
});
search.addEventListener("blur", function() {
form.classList.remove("focused");
});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '13' || e.which == '13' || e.key === "Enter") {
e.preventDefault();
searchResult(search.value);
}
}
if (window.location.hash) {
let hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
search.value = hash;
searchResult(hash);
}
function searchResult(query) {
// Get and set query
query = ((query != "" && query != originalImageTopic) ? search.value : imageTopic);
imageTopic = query;
if (imageTopic != originalImageTopic) {
parent.location.hash = imageTopic;
document.getElementById("search-term").textContent = imageTopic + " pictures";
}
// Put up loader while fetching images
mosaicLoader.style.display = "flex";
// Remove old images
let length = mosaic.children.length;
while (mosaic.lastChild && length > 1) {
mosaic.removeChild(mosaic.lastChild);
length--;
}
// Create new images
let loadedImageNum = 0
for (let i = 0; i < numImages; i++) {
let image = document.createElement("img");
image.src = `https://source.unsplash.com/random?${imageTopic}/sig${i}/`;
mosaic.appendChild(image);
}
// Wait for all images to load
let loadedImages = 0;
let image = mosaic.querySelectorAll("img");
imageCheck = setInterval(function() {
for (let i = 0; i < numImages; i++) {
if (image[i].naturalHeight !== 0 && image[i].complete) {
loadedImages++;
}
if (loadedImages == numImages) {
clearInterval(imageCheck);
// alert("Loaded!")
// Lay them out
setTimeout(imagesLoaded, 2000); // Needs some time before laying out
// Break loop
break;
}
}
}, 200)
}
searchResult(imageTopic); // Inital images with no search query
window.onload = function() {
windowResizeEvents();
}
window.onresize = function() {
windowResizeEvents();
}
function windowResizeEvents() {
imagesLoaded();
}
function mosaicCalibration() {
let images = document.querySelectorAll(".mosaic img");
if (window.innerWidth < 750) {
mosaic.classList.add("column");
} else if (window.innerWidth < 1100) {
rowWidth = 2;
} else {
rowWidth = 3 // Math.round(window.innerWidth/(426 + (2/3)));
}
if (window.innerWidth > 750) {
mosaic.classList.remove("column");
for (let i = 0; i < images.length; i++) {
images[i].style.width = `calc((100% - ${((rowWidth - 1) * 1)}rem) / ${rowWidth})`;
}
}
}
function imagesLoaded() {
// Find out row width, image width, etc
mosaicCalibration();
// Remove loader and set height to 0 so new height can be calculated
mosaicLoader.style.display = "none";
mosaic.style.height = 0;
// Define variables
let images = document.querySelectorAll(".mosaic img");
let row = 0;
let rowNum = 0;
let margin = rem(1.25);
let imageWidth = ((mosaic.scrollWidth - (2 * margin)) / rowWidth);
let column = [];
for (let i = 0; i < images.length; i++) {
images[i].style.top = i > rowWidth - 1 ? column[i-rowWidth] + margin : 0;
if (row < rowWidth) {
if (window.innerWidth > 1100) {
images[i].style.left = row * imageWidth + (row >= 1 ? row * margin : 0);
} else {
images[i].style.left = row * imageWidth + (row >= 1 ? (row + 0.5) * margin : 0);
}
row++
} else {
images[i].style.left = 0;
row = 1;
rowNum++;
}
if (rowNum > 0) {
column.push(column[i-rowWidth] + images[i].scrollHeight + margin);
} else {
column.push(images[i].scrollHeight);
}
}
mosaic.style.height = mosaic.scrollHeight;
}

Running the animation after scrolling to the block

I have function that works after window.onload, but how to run it just after scrolled to the needed . I understand that using jQuery is easier, but I need to do in native JS.
window.onload = function move() {
var width = 1;
var elem = document.getElementsByClassName("myBar");
var maxValue = document.getElementsByClassName('max-value');
for(var i = 0; i < elem.length; i++) {
var params = {
elem: elem[i],
maxElem: maxValue[i],
width: width,
interval: null
};
params.interval = setInterval(frame, 20, params);
}
function frame(aParams) {
if (aParams.width >= aParams.maxElem.dataset.max) {
clearInterval(aParams.interval);
} else {
aParams.width++;
aParams.elem.style.backgroundColor = 'blue';
aParams.elem.style.width = aParams.width + '%';
aParams.maxElem.innerHTML = aParams.width + '%';
}
};
};
https://codepen.io/Slava91/pen/PjpGGr

Try this, it will trigger the animation again when you will scroll near to the ul element. #percentage is the id I have given to the ul element in your html.
window.onload = move();
function move() {
var width = 1;
var elem = document.getElementsByClassName("myBar");
var maxValue = document.getElementsByClassName('max-value');
for(var i = 0; i < elem.length; i++) {
var params = {
elem: elem[i],
maxElem: maxValue[i],
width: width,
interval: null
};
params.interval = setInterval(frame, 20, params);
}
function frame(aParams) {
if (aParams.width >= aParams.maxElem.dataset.max) {
clearInterval(aParams.interval);
} else {
aParams.width++;
aParams.elem.style.backgroundColor = 'blue';
aParams.elem.style.width = aParams.width + '%';
aParams.maxElem.innerHTML = aParams.width + '%';
}
};
}
isScrolled = false;
window.onscroll = function loadItBack(){
var rec = document.getElementById("percentage").getBoundingClientRect();
if(window.scrollY > 600 && !isScrolled){
isScrolled = true;
move();
}else if(window.scrollY < 600){
isScrolled = false;
}
};

For your every li, you can use getBoundingClientRect to execute your animation.
Don't forget to set a flag once animation completed, else, it will execute on every scroll.

jQuery animate scrollLeft stops working after several clicks in FF and Chrome (but not Safari)

I have a very strange problem with some jquery code that scrolls a group of images. It seems to work in all browsers for the first several clicks, advancing the images by a number. And in Safari, it will work perfectly all the way to the end of the slideshow. But in FF and Chrome it will stop after a certain number of images. And this number is NOT always the same for some reason.
For example, on this page FF/Chrome will stop after clicking the next arrow 7 times.
And on this page, FF/Chrome will stop after clicking the next arrow 6 times.
Yet on this page, FF/Chrome will work all the way to the end as expected (and as Safari does all the time).
This is the code that controls the clicking:
<script>$(window).load(function(){
var currentElement = $("#ngg-gallery-list > div:nth-child(2)");
var onScroll = function () {
//get the current element
var container = $("#ngg-galleryoverview");
var wrapper = $("#ngg-gallery-list");
var children = wrapper.children();
var position = 0;
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
var childLeft = container.offset().left < child.offset().left;
if (childLeft) {
currentElement = child;
return;
}
}
}
var scrollToElement = function ($element) {
var container = $("#ngg-galleryoverview");
var wrapper = $("#ngg-gallery-list");
var children = wrapper.children();
var width = 0;
console.log(children.length);
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
if (child.get(0) == $element.get(0)) {
if (i == 0) {
width = 300;
}
container.animate({
scrollLeft: width
}, 300);
onScroll();
}
if (child.next().length > 0) {
//make sure we factor in borders/padding/margin in height
width += child.next().offset().left - child.offset().left
} else {
width += child.width();
}
}
}
var next = function(event) {
event.preventDefault();
scrollToElement(currentElement);
}
var prev = function(event) {
event.preventDefault();
var container = $("#ngg-galleryoverview");
if (currentElement.prev().length > 0) {
if (container.offset().left == currentElement.prev().offset().left) {
currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
} else {
currentElement = currentElement.prev();
}
}
scrollToElement(currentElement);
}
$("#ngg-galleryoverview").on('scroll', onScroll);
$("#nexty").click(next);
$("#prevy").click(prev);
});
</script>
I'm stumped.

Well, making my code look more like what I found here fixed the problem. (Even if I am not entirely sure why). Hoping it helps someone else, here is the final code:
<script>
$(document).ready(function () {
var currentElement = $("#ngg-galleryoverview > div:nth-child(1)");
var onScroll = function () {
var container = $("#ngg-galleryoverview");
var children = $(".list");
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
var childLeft = container.offset().left < child.offset().left;
if (childLeft) {
currentElement = child;
//console.log(currentElement);
return;
}
}
};
var scrollToElement = function ($element) {
var container = $("#ngg-galleryoverview");
var children = $(".list");
var width = 0;
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
if (child.get(0) == $element.get(0)) {
if (i === 0) {
width = 0;
}
container.animate({
scrollLeft: width
}, 500);
onScroll();
}
if (child.next().length > 0) {
width += child.next().offset().left - child.offset().left;
} else {
width += child.width();
}
}
};
var buttonright = function (e) {
scrollToElement(currentElement.next());
};
var buttonleft = function (e) {
var container = $("#ngg-galleryoverview");
if (currentElement.prev().length > 0) {
if (container.offset().left == currentElement.prev().offset().left) {
currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
} else {
currentElement = currentElement.prev();
}
}
scrollToElement(currentElement);
};
onScroll();
$("#ngg-galleryoverview").scroll(onScroll);
$("#nexty").click(buttonright);
$("#prevy").click(buttonleft);
});</script>

Scrolling button jQuery doesn't work instantly

I'm working on some web pages that use a button to scroll to the next div. I can get it to work on every page, except in this particular instance (see jsfiddle).
My problem is that the buttons don't work on loading the page, the user first has to start scrolling manually, before the buttons work. I'm assuming that's because of some fault in my jQuery coding, which I've looked over and over, but I can't seem to find the problem. Is there anyone who is a bit more familiar with jQuery than I am who can offer me a solution?
http://jsfiddle.net/y5wx7nst/3/
$(document).ready(function () {
var currentElement = $("#bodytext > div:nth-child(1)");
var onScroll = function () {
var container = $("#bodytext");
var children = $(".section");
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
var childLeft = container.offset().left < child.offset().left;
if (childLeft) {
currentElement = child;
console.log(currentElement);
return;
}
}
};
var scrollToElement = function ($element) {
var container = $("#bodytext");
var children = $(".section");
var width = 0;
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
if (child.get(0) == $element.get(0)) {
if (i === 0) {
width = 0;
}
container.animate({
scrollLeft: width
}, 500);
onScroll();
}
if (child.next().length > 0) {
width += child.next().offset().left - child.offset().left;
} else {
width += child.width();
}
}
};
var buttonright = function (e) {
scrollToElement(currentElement.next());
};
var buttonleft = function (e) {
var container = $("#bodytext");
if (currentElement.prev().length > 0) {
if (container.offset().left == currentElement.prev().offset().left) {
currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
} else {
currentElement = currentElement.prev();
}
}
scrollToElement(currentElement);
};
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
});

You are only calling the onScroll() function after you initially scroll:
$("#bodytext").scroll(onScroll);
I added this before that declaration and it all worked:
onScroll();
jsfiddle: http://jsfiddle.net/y5wx7nst/5/

When code run value of currentElement is not correct. So you should calculate it calling a function onScroll();
...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});

Large list rendering in JavaScript

I am trying to render the list based on virtual rendering concept. I am facing some minor issues, but they are not blocking the behaviour. Here is the working fiddle http://jsfiddle.net/53N36/9/ and Here are my problems
Last items are not visible, I assume some where I missed indexing.(Fixed, Please see the edit)
How to calculate scrollPosition if I want to add custom scroll to this.
Is this the best method or any other?
I have tested it with 700000 items and 70 items in chrome. Below is the code
(function () {
var list = (function () {
var temp = [];
for (var i = 0, l = 70; i < l; i++) {
temp.push("list-item-" + (i + 1));
}
return temp;
}());
function listItem(text, id) {
var _div = document.createElement('div');
_div.innerHTML = text;
_div.className = "listItem";
_div.id = id;
return _div;
}
var listHold = document.getElementById('listHolder'),
ht = listHold.clientHeight,
wt = listHold.clientWidth,
ele = listItem(list[0], 'item0'),
frag = document.createDocumentFragment();
listHold.appendChild(ele);
var ht_ele = ele.clientHeight,
filled = ht_ele,
filledIn = [0];
for (var i = 1, l = list.length; i < l; i++) {
if (filled + ht_ele < ht) {
filled += ht_ele;
ele = listItem(list[i], 'item' + i);
frag.appendChild(ele);
} else {
filledIn.push(i);
break;
}
}
listHold.appendChild(frag.cloneNode(true));
var elements = document.querySelectorAll('#listHolder .listItem');
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(delta);
//if(filledIn[0] != 0 && filledIn[0] != list.length){
if (delta == -1) {
var start = filledIn[0] + 1,
end = filledIn[1] + 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = filledIn[0]; i < filledIn[1]; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
} else {
var start = filledIn[0] - 1,
end = filledIn[1] - 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = start; i < end; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
}
//}
}
if (listHold.addEventListener) {
listHold.addEventListener("mousewheel", MouseWheelHandler, false);
listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else listHold.attachEvent("onmousewheel", MouseWheelHandler);
}());
Please suggest me on this.
EDIT:
I have tried again and I am able to fix the indexing issue. http://jsfiddle.net/53N36/26/
But how can I calculate the scroll position based on the array list currently displayed.

Is this the best method or any other?
I think something that would make this much easier is not to try to handle scrolling yourself.
In this fiddle I show that you can let the browser handle scrolling for you, even though we are using virtual rendering.
Using .scrollTop I detect where the browser thinks the user is looking, and I draw in items based on that.
You'll note that if you set hidescrollbar to false and the user uses it to scroll, my method still runs fine.
Therefore, to calculate scroll position you can just use .scrollTop.
And as for custom scrolling, just make sure you influence the .scrollTop of #listHolder and recall refreshWindow()
CODE FROM FIDDLE
(function () {
//CHANGE THESE IF YOU WANT
var hidescrollbar = false;
var numberofitems = 700000;
//
var holder = document.getElementById('listHolder');
var view = null;
//get the height of a single item
var itemHeight = (function() {
//generate a fake item
var div = document.createElement('div');
div.className = 'listItem';
div.innerHTML = 'testing height';
holder.appendChild(div);
//get its height and remove it
var output = div.offsetHeight;
holder.removeChild(div);
return output;
})();
//faster to instantiate empty-celled array
var items = Array(numberofitems);
//fill it in with data
for (var index = 0; index < items.length; ++index)
items[index] = 'item-' + index;
//displays a suitable number of items
function refreshWindow() {
//remove old view
if (view != null)
holder.removeChild(view);
//create new view
view = holder.appendChild(document.createElement('div'));
var firstItem = Math.floor(holder.scrollTop / itemHeight);
var lastItem = firstItem + Math.ceil(holder.offsetHeight / itemHeight) + 1;
if (lastItem + 1 >= items.length)
lastItem = items.length - 1;
//position view in users face
view.id = 'view';
view.style.top = (firstItem * itemHeight) + 'px';
var div;
//add the items
for (var index = firstItem; index <= lastItem; ++index) {
div = document.createElement('div');
div.innerHTML = items[index];
div.className = "listItem";
view.appendChild(div);
}
console.log('viewing items ' + firstItem + ' to ' + lastItem);
}
refreshWindow();
document.getElementById('heightForcer').style.height = (items.length * itemHeight) + 'px';
if (hidescrollbar) {
//work around for non-chrome browsers, hides the scrollbar
holder.style.width = (holder.offsetWidth * 2 - view.offsetWidth) + 'px';
}
function delayingHandler() {
//wait for the scroll to finish
setTimeout(refreshWindow, 10);
}
if (holder.addEventListener)
holder.addEventListener("scroll", delayingHandler, false);
else
holder.attachEvent("onscroll", delayingHandler);
}());
<div id="listHolder">
<div id="heightForcer"></div>
</div>
html, body {
width:100%;
height:100%;
padding:0;
margin:0
}
body{
overflow:hidden;
}
.listItem {
border:1px solid gray;
padding:0 5px;
width: margin : 1px 0px;
}
#listHolder {
position:relative;
height:100%;
width:100%;
background-color:#CCC;
box-sizing:border-box;
overflow:auto;
}
/*chrome only
#listHolder::-webkit-scrollbar{
display:none;
}*/
#view{
position:absolute;
width:100%;
}