We Keep Coding

Change image and Text on Scroll (Javascript)

I dont have much experience in javascript but trying to achieve a slideshow like in https://district2.studio/ where the text and image changes as you scroll. In the example no matter the amount you scroll at a time or inbetween the image changing animation, the image will change only once at a time. I'm trying to achieve this using javascript only and no additional plugin or libraries. Hope someone can help me.

You have some errors.
First of all, you have to wait the DOM is ready. You could movet he entire before de body tag closes to ensure that or use window.onload
class prop elements it's an array.
window.onload = function() {
document.getElementById("image1").onscroll = function() {
if(document.getElementById("image2").classList.contains("scroll")){
document.getElementById("image2").classList.remove("scroll");
} else {
document.getElementById("image2").classList.add("scroll");
}
};
}
Something like this should work

How can I change the background color of a complete section after clicking on one of it's child elements?

I am working on a personal project trying to match the below design:
I am on what I see as the hardest part. When clicking on one of the 6 different colored boxes, there should be further information popping up like below:
I am trying to first implement a background color change when the Facebook Ad Campaign box is clicked. When clicked, the background color of the whole container (which holds the 6 boxes) should change.
I believe jQuery is the right way to go about this but having tried the below it is not working:
$("#fbAdCampaigns").click(function(){
$(#container-parent").backgroundColor = "red";
}
Or, trying this to test if it changes the first out of the 6 boxes:
$("#fbAdCampaigns").click(function(){
$("#fbAdCampaigns").css({ "background-color": "#ffe"});
})
Neither are working as intended as nothing happens.
Please see what I have done so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
Many thanks in advance for any assistance.

There are a couple of problems here.
Delete your in-line <script> tags after the imports and move them to the JS section, which would be an external file in a local project.
You only need one document.ready function.
Instead of .click use .on('click', function() ...)
Instead of .css('attribute': 'value') use .css('attribute', 'value')
As a best practice, you should not use inline CSS and Javascript when you already have CSS and JS files.
Here's some working code that doesn't do exactly what you want, but should give you the way forward:
$(document).ready(function() {
$("#menu").on('click', function() {
$("#icon").toggleClass("fa-times");
});
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaigns").css("background-color", "#000000");
});
});

You're changing the color of the container, but it isnt visible because of the 6 boxes on top of it. Try something like this, which changes the color of each box when clicked:
https://codepen.io/aprouja1/pen/mYwEeX?editors=0010
function changeBackground(){
const clickedColor = this.style.backgroundColor;
divs.forEach(div=>div.style.backgroundColor=clickedColor)
}

You can add a class to the #fbAdCampaigns element to handle the CSS changes or use .css().
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").addClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").css("background-color", "#fff");
});
Using .addClass also means you can revert the change easily with .removeClass. Alternatively you could use toggleClass
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").removeClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").toggleClass("bg-color");
});
To access the entire container you can use the jQuery method .parent()
https://api.jquery.com/parent/
https://codepen.io/anon/pen/arwZZm

jQuery: fade out, change background image, then fade in

I'm trying to fade the container div around this target div, then change the background, then fade it back in. The problem is that all the functions in this block are called instantaneously, which means the background is swapped out immediately, then the div fades out and in. Not sure how to implement this as a stepped operation.
For now, don't worry about the "myType" part. I have a dropdown menu on the page that you select which changes the background image in the div to a different image based on the selection. I've removed that functionality from this code, since it isn't actually relevant.
HTML:
<div id="itemCustomize">
<div id="itemBaseImg"></div>
</div>
jQuery:
$(myType).change(function() {
$("#itemCustomize").fadeOut(500);
$("#itemBaseImg").css('background-image', 'url(myimage.jpg)';
$("#itemCustomize").fadeIn(500);
}
Update:
The true implementation is actually different. I should have considered that. I have an array of images which I generate an image URL from by parsing the base URL with the variable "url", then add the base image part of the URL by calling on an index. This worked before it was wrapped in a callback function, but now that I want to fade in and out the wrapper div, it doesn't work.
$(myType).change(function() {
$("#itemCustomize").fadeOut(500, function() {
$("#itemBaseImg").css('background-image', url + itemBaseImg[myType.selectedIndex] + ")");
});
$("#itemCustomize").fadeIn(500);
});

You can use the complete callback on jQuery fadeOut function to make them run one after another.
$(select).change(function() {
$("#containerdiv").fadeOut(500, function() {
$("#targetdiv").css('background-image', 'url(myimage.jpg)';
$("#containerdiv").fadeIn(500);
});
}
See: http://api.jquery.com/fadeout/

I figured it out. I needed to create a variable to pass into the index. Thanks for everyone's help!
$(myType).change(function() {
var myIndex = this.selectedIndex;
$("#itemCustomize").fadeOut(50, function() {
$("#itemBaseImg").css('background-image', url + itemBaseImg[myIndex] + ")");
$("#itemCustomize").fadeIn(200);
});
});

mCustomScrollbar scrollbar display on hidden div

I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!

The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}

How to change the mouse pointer?

I need to change the mouse pointer to the wait cursor. I tried
document.body.style.cursor = 'wait';
In my fiddle, my mouse cursor does not change (nor does it change in my main app). I tried a couple methods, but nothing seems to work (IE7 and FF7 tested). How do I change the cursor? I am open to using CSS instead of JavaScript if that works better.
For what it is worth...In the final program, I need to change the pointer at the start of an AJAX call and then change it back to the default in the callback. But, this is a simplified example and still does not work.

I'd create a CSS class:
.busy {
cursor: wait !important;
}
and then assign this class to body or whatever element you want to mark as busy:
$('body').addClass('busy');
// or, if you do not use jQuery:
document.body.className += ' busy';
http://jsfiddle.net/ThiefMaster/S7wza/
If you need it on the whole page, see Wait cursor over entire html page for a solution

Since there is no text you don't really have a body (in terms of "it has no height").
Try adding some content and then hovering the text: http://jsfiddle.net/kX4Es/4/. You can just use CSS.
Or, add it to the <html> element to bypass this <body> constraint: http://jsfiddle.net/kX4Es/3/.
html {
cursor: wait;
}

Like this:
$('html').css('cursor', 'wait');
Or as a CSS class as said above by ThiefMaster

I only tried this in chrome and firefox so it may not work everywhere.
But if you want to do this with javascript and turn it on and off try this.
//add
document.styleSheets[1].insertRule('html {cursor:wait;}',document.styleSheets[1].cssRules.length);
//for firefox I had to tell it to fill the screen with the html element
//document.styleSheets[1].insertRule('html {height:100%;width:100%;cursor:wait;}',0);
//remove
document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length-1);
http://www.quirksmode.org/dom/w3c_css.html#access seems to be a good reference on messing around with the actual stylesheets. I was hoping for a better way to edit the html elements style but this was all I could find...

are you declaring it as a function ?
function cursor_wait() {
document.body.style.cursor = 'wait';
}
then call
cursor_wait();
in your script ?