We Keep Coding

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();
});

JQuery behaving differently in Firefox and Chrome/Safari

I have this code which places images in columns(not my code but modified). I just added a script for infinite scroll so to retain the previous order of the images, I have them nested in a page div and so I iterate through page div and then go ahead to iterate through each image within the page. The odd thing here is that Firefox seems to place the images right but chrome and safari just mess the placement up with duplicate additions. Any one got any ideas why?
var colCount = 0;
var colWidth = 225;
var margin = 10;
var spaceLeft = 0;
var windowWidth = 0;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
windowWidth = $("#container").outerWidth();
blocks = [];
// Calculate the margin so the blocks are evenly spaced within the window
colCount = Math.floor(windowWidth /(colWidth + margin*2));
spaceLeft = (windowWidth - ((colWidth*colCount)+(margin*(colCount-1)))) / 2;
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.page').each(function(i){
$(this).children('.block').each(function(j){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = (index * (colWidth + margin));
$(this).css({
'left':(leftPos + spaceLeft) + 'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight() + margin;
});
});
}
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
//$('div#loadmoreajaxloader').show();
$.ajax({
url: "/more",
success: function(html){
if(html){
$("#container").append(html);
setupBlocks()
//$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});

Javascript: get an image width and than set a class

I want to analyse every image of an article and set an class for all images smaller/equal than perhaps 400px (and another class for images bigger than 400px) so that I can give them a specific style.
In jQuery it would be perhaps something like this
$('div#content').find('img').each(function () {
var $this = $(this), width = $this.width();
if (width <= 400) {
$this.addClass('small_img');
}
var $this = $(this), width = $this.width();
if (width > 400) {
$this.addClass('large_img');
}
});
But I need it to be in pure Javascript. As a stupid Journalist and Webdesigner I don't get it... If you could help me, I would be very thankful.

You mean something FAST and short like this?
window.onload = function() {
var n=document.getElementById('content').getElementsByTagName('img'),
i=n.length;
while(i--){
n[i].className = n[i].clientWidth > 400 ? 'large_img' : 'small_img' ;
}
};
See this fiddle for working example.
Also read this question on SO for selecting a method to fetch the (computed) width.

window.onload = function() {
var content = document.getElementById('content');
if (content) {
var img = content.getElementsByTagName('img');
for (var i = 0, count = img.length; i < count; i++) {
if (img[i].offsetWidth <= 400) {
img[i].className += ' small_img';
} else {
img[i].className += ' large_img';
}
}
}
};

Something like this should work:
// Find the parent container 'div#content'
var container = document.getElementById( "content" ),
// Find all images within the parent
images = container.getElementsByTagName( "img" ),
// Total number of images to check
len = images.length,
// Loop counter
i = 0,
// Represents the current image in the loop
image;
// Loop through all the images
for ( ; i < len; i++ ) {
// Access the current image
image = images[ i ];
// Use the ternary operator to assign one of two classes, based on width
image.className += ( image.clientWidth > 400 ) ? " large_img" : " small_img";
}
Hope that helps. Cheers!

var contentDiv = document.getElementById('content');
var imgs = contentDiv.getElementsByTagName('img');
for(i=0;i<img.length;i++){
var img = imgs[i];
if(img.clientWidth <= 400) img.className += " small_img"
else img.className += " large_img"
}