We Keep Coding

Toggling class on scroll when div enters viewport with CSS scroll-snap

I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?

How to change md-whiteframe value on scroll down in Material Angular

I am new to Material Angular, and just started using it around a month ago, so this might be a simple question. Anyway, I have a toolbar set to a white frame of 0. When I scroll down in my md-content I would like to have the white frame value change to 2 or 4 or just another number, hence giving it a shadow. I also would like to have it animate, not having the shadow just blink/appear. An example of that would be the Google Fonts website. If you look at the picture bellow you will see a line under the toolbar. Then the Picture under that shows that when you scroll it turns into a shadow. Outline above.
Shadow above.
I would try to invest time in inspecting their css, js, and html, but I am actually working on a project for school, which is due next Friday, and I have to type up a bunch of content, and gather information.
I was able to make a shadow appear at the bottom of the md-content, but that was by adding a css selector with a box-shadow when I scrolled down, I just can't figure out how to change the md-whiteframe value on scroll.
I have tried to use a variable. Like md-whiteframe="{{ctrl.elevation}}"
Then say something like
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
I tried something like that in my js, but it just ended up as a mess. This isn't a really big deal I am just trying to give my project some nice touches. I would really appreciate any help though. Thank you in advance. Also I looked for questions similar to this, and didn't find any that were what I wanted, but if you find a question that answers this then please tell me.

Try to act on the class property of the md-whiteframe directive.
For instance:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
On your controller:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}
https://material.angularjs.org/latest/demo/whiteframe

Animated timeline with javascript

I am trying to create some time line effect. It will have couple of points for each time with designated picture inside a circle.
I want them to be clickable. When I click, I want another picture(plane) to move from its current location to where it is clicked within 1 second and shrink and disappear. Something similar to following GIF.
I have found couple of examples but I couldn't put them together to achieve what I want. I really searched a lot but couldn't solve it on my own. I am an iOS developer and no background on web development.
I will appreciate if you can help me on this.

Give a relative position to the timeline. Then you can get the position of a clicked circle, and assign it to the movable one. Add CSS transitions to have a better visual result.
Example using jQuery:
$(document).on("click", ".point", function () {
var $this = $(this);
var $abs = $(".is-absolute");
$abs.css("top", $this.position().top);
$abs.css("left", $this.position().left);
});
http://jsfiddle.net/dsr4esn3/

Animate between positions with just CSS?

I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?

It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);

You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/

"Disabling" an HTML table with Javascript

I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.
By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.
I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.
I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?

You could try javascript like:
function disable(table_id)
{
var inputs=document.getElementById(table_id).getElementsByTagName('input');
for(var i=0; i<inputs.length; ++i)
inputs[i].disabled=true;
}

Try the below with Jquery
$("#freez").click(function(){
$('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
$('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});

Disabling the inner elements of an HTML table can also be done using pointer-events CSS style as shown below:
table[disabled], table[disabled] input { pointer-events: none }
At any desired point in our JavaScript code, we can add disabled attribute to the parent table which will bring the CSS styling into effect:
let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);

Another way to do it would be using the opacity property.
function disablePanel(id) {
var panel = document.getElementById(id);
var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
for (var i=0; i<inputs.length; i++) {
inputs[i].disabled = true;
}
panel.style.opacity = 0.3; //or any other value
}

Can't you just find out the height of the area in pixels with JavaScript? And then set the veil's height to that number?
I don't have the exact code in my head but offsetHeight might do the trick

Somebody please correct me if I am wrong, but I have seen Javascript and some derivate Javascript libraries that have a lot of options for accomplishing for what you would like to do. I have used the jQuery library to do some similar effects.
One thing to think about is what exactly you are trying to disable. Essentially tables are not interactive so disabling a table would not accomplish much. If it is the form elements within the table you want to disable. You can accomplish this using JavaScript.
Along with using JavaScript for disabling the form elements, you can also use it to change properties of the non interactive elements.
An example of this would be using JavaScript to change the color of the font and borders and other non interactive elements in the table to give the "look" of being disabled. Of course you still need to use JavaScript to disable the form elements.