Develop Reference

Dynamically changing image to rgb and grayscle when scrolling

I'm pretty new to JavaScript and trying to make my image from RGB to Grayscale while scrolling down and vise versa. I managed my image to get grayvalued when scrolling however I don't get back to the RGB image.
My code for JavaScript is:
let element = document.getElementById("image");
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
} else {
element.src = 'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80'
}
};
It's also public on https://jsfiddle.net/vdszymh7/139/
Maybe you have some suggestions how to dynamically change between these two modes.

What you're trying to achieve could be done by this way:
window.onscroll = function() {
var scrollLimit = 100;
if (window.scrollY >= scrollLimit) {
element.style.filter = 'grayscale(1)';
console.log('gray')
} else {
element.style.filter = 'none'
}
};

How do you prevent horizontal interfearing of JS movement?

I'm working on a school project, we have just started learning JavaScript. I have to make a script that makes something move with JS. Well, I made the following script:
var object = document.getElementById("object");
var omhoog = document.getElementById("omhoog");
var omlaag = document.getElementById("omlaag");
var links = document.getElementById("links");
var rechts = document.getElementById("rechts");
object.style.left = '0px';
object.style.top = '0px';
omlaag.onclick = function()
{
var positiehuidigtop = parseInt(object.style.top);
setInterval(function()
{
if (parseInt(object.style.top)<positiehuidigtop+100)
{
object.style.top = (parseInt(object.style.top) + 10) + 'px';
}
}, 10);
}
links.onclick = function()
{
var positiehuidigleft = parseInt(object.style.left);
setInterval(function()
{
if (parseInt(object.style.left)>positiehuidigleft-100)
{
object.style.left = (parseInt(object.style.left) - 10) + 'px';
}
}, 10);
}
rechts.onclick = function()
{
var positiehuidigleft = parseInt(object.style.left);
setInterval(function()
{
if (parseInt(object.style.left)<positiehuidigleft+100)
{
object.style.left = (parseInt(object.style.left) + 10) + 'px';
}
}, 10);
}
Sorry for the Dutch stuff in there, but it's variables, so the name doesn't really matter.
Anyways, at first I just had the part of the script that made the div move right. Worked like a charm. But when I started adding left, it would interfear. Both directions are sort of fighting.
I really don't know what to do and this stuff is getting my a headache :/

You should use clearInterval to stop the already running interval timer before starting the new one.
var currentInterval;
omlaag.onclick = function() {
clearInterval(currentInterval);
currentInterval = setInterval(
...
);
};
rechts.onclick = function() {
clearInterval(currentInterval);
currentInterval = setInterval(
...
);
};

HTML5 canvas slide show issue

I have a slideshow that I am triggering with a call from a link. The slideshow is working well. I am having problems stopping AND clearing the slideshow. I have a temporary link that I am calling the stopShow function that is stopping the show, but is not clearing it so I can then redisplay other items.
// JavaScript Document
var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var stopShow = 0;
var slideTImer;
function slideShow() {
if (!stopShow){
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);
//set image size and call switch function
img.setAttribute('width','500');
img.setAttribute('height','400');
switchImage();
//start the animation
slideTimer = setInterval(switchImage,3000);
}
}
function switchImage() {
//set img element source property to images in slideshow
img.setAttribute('src',imagePaths[currentImage++]);
//if past the last image, loop
if (currentImage >= imagePaths.length)
currentImage = 0;
//fade into image by 10th of full saturation
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,100,0,500,400);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
showCanvasCtx.restore();
}
function stopSlideShow() {
//alert('stop show');
clearInterval(slideTimer);
clearInterval(revealTimer);
stopShow=1;
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);
}

This is wrong!
showCanvasCtx.canvas.width
The object model of the canvas works this way:
Canvas -> Context
the width and height parameters are not in the Context but in the Canvas itself. So, considering you got them this way in your code:
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
you should get the dimensions of the canvas like this:
showCanvas.width
showCanvas.height

By removing if (!stopShow){ call, and clearing the canvas in the stopSlideShow function, the function works as desired. It was necessary to set the globalAlpha to 1 in the stopSlideShow function. The ending code looks like this:
// JavaScript Document
var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var stopShow = 0;
var slideTImer;
function slideShow() {
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvas.width,showCanvas.height);
//set image size and call switch function
img.setAttribute('width','500');
img.setAttribute('height','400');
switchImage();
//start the animation
slideTimer = setInterval(switchImage,3000);
}
function switchImage() {
//set img element source property to images in slideshow
img.setAttribute('src',imagePaths[currentImage++]);
//if past the last image, loop
if (currentImage >= imagePaths.length)
currentImage = 0;
//fade into image by 10th of full saturation
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,100,0,500,400);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
showCanvasCtx.restore();
}
function stopSlideShow() {
//alert('stop show');
clearInterval(slideTimer);
clearInterval(revealTimer);
stopShow=1;
img.setAttribute('src',100);
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
showCanvasCtx.globalAlpha=1;
}

Check if all percentages in the array were shown

I'm using this Code to show the current progress in my progressbar:
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;
function initRotateText() {
rotatingTextElement = document.getElementById("percent");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "5%";
rotatingText[2] = "10%";
rotatingText[3] = "15%";
rotatingText[4] = "20%";
rotatingText[5] = "25%";
rotatingText[6] = "30%";
rotatingText[7] = "35%";
rotatingText[8] = "40%";
rotatingText[9] = "45%";
rotatingText[10] = "50%";
rotatingText[11] = "55%";
rotatingText[12] = "60%";
rotatingText[13] = "65%";
rotatingText[14] = "70%";
rotatingText[15] = "75%";
rotatingText[16] = "80%";
rotatingText[17] = "85%";
rotatingText[18] = "90%";
rotatingText[19] = "95%";
rotatingText[20] = "100%";
setInterval(rotateText, 500);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
It basicly writs a new percentage in span#percent every 500 miliseconds.
The problem is that after the progressbar has reached 100% it starts again with 0%, 5% and so on.
How can I check if the percentages in the array rotatingText till [20] were all shown and then stop the rotation?

Do this instead:
var rotatingTextElement = document.getElementById("percent");
var ctr = 0;
function rotateText() {
rotatingTextElement.innerHTML = ctr + "%";
ctr += 5;
if (ctr <= 100) {
window.setTimeout(rotateText, 500);
}
}
rotateText();

There are a few ways you can tidy this up. To answer your question, start by assigning the interval to a variable:
var rotator = null;
...
rotator = setInterval(rotateText, 500);
...
function rotateText() {
ctr++;
if(ctr >= rotatingText.length -1) {
clearInterval(rotator);
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
...
Then instead of resetting the iterator to 0 when it goes out of bounds, clear the interval so it stops changing the value. You'll need to add the -1 so that it stops on rotatingText[length-1] (the last element)

How to add scroll background effect to multiple elements with different settings?

In this demo http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery
This code is for one background only. I want to add multiple background with different direction and speed.
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
Currently it has settings for
$('#header').css("background-position",current+"px 0");
In a website I want to use this effect on #footer or #content background also. but with different speed and direction.
And is there any better and more optimized jquery method to achieve same effect?
And can we get same effect using CSS 3, without javascript?

Just saw the OP's answer, but decided to post anyway:
I've created a jQuery plugin to do this:
(function($) {
$.fn.scrollingBackground = function(options) {
// settings and defaults.
var settings = options || {};
var speed = settings.speed || 1;
var step = settings.step || 1;
var direction = settings.direction || 'rtl';
var animStep;
// build up a string to pass to animate:
if (direction === 'rtl') {
animStep = "-=" + step + "px";
}
else if (direction === 'ltr') {
animStep = '+=' + step + "px";
}
var element = this;
// perform the animation forever:
var animate = function() {
element.animate({
backgroundPosition: animStep + " 0px"
}, speed, animate);
};
animate();
};
})(jQuery);
Usage:
$("#header").scrollingBackground({
speed: 50,
step: 50,
direction: 'ltr'
});
This is pretty basic, and assumes that you're background-repeat is 'repeat-x' on the element you call it on. This way, there's no need to reset the background position every so often.
Working example: http://jsfiddle.net/andrewwhitaker/xmtpr/

I could work out the following solution. Am not sure if it is efficient. Will wait for anyone to comment or provide a better option.
Till then...:
var scrollSpeed = 70;
var step = 1;
var current = 0;
var images =
[
{
imageWidth:2247,
imagePath:"images/image1"
},
{
imageWidth:1200,
imagePath:"images/image2"
}
]
var headerWidth = 800;
var imageRotateCount = 0;
var imagesLength = images.length;
$('#header').css("background-image", images[0].imagePath);
function scrollBg(){
var curIndex = imageRotateCount%imagesLength;
var curImage = images[curIndex];
current -= step;
var restartPosition = -(curImage.imageWidth - headerWidth);
if (current == restartPosition){
current = 0;
imageRotateCount++;
curIndex = imageRotateCount%imagesLength;
curImage = images[curIndex];
$('#header').css("background-image", curImage.imagePath);
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);