We Keep Coding

Full page scroll with parallax effect

I want to make a full page scroll effect like this site or this site (demo here).
It seems that divs are moving in the different speed or kind of some acceleration so that the later div may scroll first and the div before may scroll later, and makes the later div becomes like a mask that will hide the before div for a little while.
I tried to use scrollIntoView with smooth behavior like this:
const content = document.querySelectorAll('section');
let index = 0;
document.addEventListener('wheel', event => {
var delta = event.wheelDelta;
if (delta < 0) {
index++;
content.forEach((section, i) => {
if (i === index) {
toggleText(i, 'show');
section.scrollIntoView({behavior: "smooth"});
}
})
} else {
index--;
content.forEach((section, i) => {
if (i === index) {
toggleText(i, 'show');
section.scrollIntoView({behavior: "smooth"});
}
})
}
})
Now when scroll event fires, each section moves in the same speed, and the later section cannot hide the before section for a little while.
How to implement this "mask" like effect?

Easiest way to do this would just to add delays after clicking next or prev
var delay = 2500; //2.5 second
setTimeout(function() {
//your code here
}, delay);
Your code will execute in 2.5 seconds.

Remove event listener and reset classList toggle on resize

I would like to remove a click event listener on a certain screen size, while resizing browser.
The problem is that the code below works where I refresh the page and desired result is there. However, while resizing the browser, it stays in the state of either being clickable if under the wanted width or being non clickable over the wanted width.
let viewPort = window.innerWidth || document.documentElement.clientWidth;
let dropToggle = document.querySelectorAll(".someparent");
let dropMenu = document.querySelectorAll(".somechild");
for (let i = 0; i < dropToggle.length; i++) {
dropToggle[i].addEventListener('click', function a(event) {
if (viewPort < 786) {
dropMenu[i].classList.toggle("drop");
if (event.dropToggle == 2);
event.stopPropagation();
}
else {
dropToggle.removeEventListener('click', a);
/*update*/
dropMenu[i].classList.remove("drop");
}
/*update*/
window.addEventListener("resize", function() {
viewPort = window.innerWidth || document.documentElement.clientWidth;
}, true);
});
}
So basically, I would need the function to kick in when the browser is being resized without refreshing the page. Any help would be appreciated.
EDIT updated code with partial solution.
New problem: The toggle classList.toggle "drop" remains open if not closed on the smaller width. Adding a classList.remove to the "drop" within the else condition does not work either, this actually removes the function entirely on resize. Is there a way to reset the classList.toggle on resize?

You need to update the value of viewPort every time you resize your window. At the moment viewPort is initialized when you load your page but is never reinitialized again. To do this you can add a resize event listener to your window:
window.addEventListener("resize", function() {
viewPort = window.innerWidth || document.documentElement.clientWidth;
}, true);

You need to define your event listener call outside of your for loop
& pass the callback as a reference in add/remove event listener method.
Also you need to add window.resize event listener (As shown below)
This code should work fine for you
let dropToggle = document.querySelectorAll(".someparent");
let dropMenu = document.querySelectorAll(".somechild");
function a(event) {
dropMenu[i].classList.toggle("drop");
if (event.dropToggle == 2);
event.stopPropagation();
}
for (let i = 0; i < dropToggle.length; i++) {
window.addEventListener("resize", function() {
viewPort = window.innerWidth || document.documentElement.clientWidth;
if (viewPort < 786) {
dropToggle[i].addEventListener("click", a);
} else {
dropToggle[i].removeEventListener("click", a);
}
});
}

Matchmedia can handle this - and allow javascript functions when the media (window) matches the criteria.
References can be found here (https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and here (https://www.sitepoint.com/javascript-media-queries/)
Effectively its media queries for javascript. And the syntax is essentially the same as for CSS media queries.
// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 768px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// do what you want when window width is at least 768px
} else {
// do what you want when window width is less than 768px
}
}

"touchend" event partly not working on iphone mobile browser

On the mobile version of the website I have made, I use a javascript file to handle the tap of a user to open up the side display.
What I wanted to do was if a user presses the side display it should expand, if the touch area is not the side display shrink back to the original state.
It is currently working on samsung browsers, I have also tried on iphones using a chrome and safari browser and it expands when pressed on the side display but only closes when I press the button located on the lower right hand corner. The areas excluding the side navigation and the background do not initiate the div to return to original state.
Here is my javascript code for handling touch events:
document.getElementById('side_box').addEventListener('touchend', function(event){
var touchobj = event.changedTouches[0] // reference first touch point for this event
const vals = document.getElementById('val-display');
const lst_elem = document.getElementsByClassName('list-element');
const arrow = document.getElementById('arrow');
if(screen && screen.width < 480) {
if (event.target === this || event.target === arrow) {
this.style.opacity = "0.7";
this.style.width = "200px";
vals.style.opacity = "0";
arrow.style.display = "none";
for (let i = 0; i < lst_elem.length; i++) {
lst_elem[i].style.visibility = "visible";
}
} else {
this.style.opacity = "0.3";
this.style.width = "50px";
vals.style.opacity = "1";
arrow.style.display = "block";
for (let i = 0; i < lst_elem.length; i++) {
lst_elem[i].style.visibility = "hidden";
}
}
}
event.preventDefault();
}, false);
The if statement is currently working perfect but there is a problem in the else not initiating when pressed anywhere else except the side display.
You can also check the problem by going on andy.serra.us on your mobile.
Thanks for the help in advance.

Javascript, scroll event listener doesn't fire until scroll is done on mobile

I am using an event listener for scroll that will change a button from position:fixed to position:relative on the page depending where the user is on the page. I have a pretty straight forward setup, I am using react, when the react component mounts, I add a listener with a throttler for the scroll event. This works great on desktop, however on mobile, I notice the event to change the positioning on the element is not firing until the scroll is done.
Here is the setup I have -
On the component mount, add listener :
componentDidMount() {
window.addEventListener('scroll', this.scrollThrottler);
}
Which calls the throttling function :
let scrollTimeout;
scrollThrottler() {
// pass through throttle designated at 15 fps
if ( !scrollTimeout ) {
scrollTimeout = setTimeout(() => {
scrollTimeout = null;
this.handleScroll();
}, 66);
}
}
And then the function it calls just checks if a certain div at the right point on the DOM to change the class on it like so :
handleScroll() {
const width = this.state.windowWidth ? this.state.windowWidth : window.innerWidth;
const stickyBoundary = this.refs.approved.getBoundingClientRect().top + this.refs.approved.offsetHeight + this.refs.stickyBar.offsetHeight - window.innerHeight;
if ( (width <= 991) && (stickyBoundary > 0)) {
this.refs.rootNode.className = 'row primary-product-block sticky-add-btn';
} else {
this.refs.rootNode.className = 'row primary-product-block';
}
}
So this works great on desktop, however on mobile it looks like it is not snapping into position fixed or relative until after the scroll event is done. Is there anyway to smooth this out? Thanks!

add touchmove event to your code
componentDidMount() {
window.addEventListener('scroll', this.scrollThrottler);
window.addEventListener('touchmove', this.scrollThrottler);
}

execute a jQuery slideUp event when screen width exceeds a certain value

I am making a responsive site in which I add event listeners to blocks to slide down. If I resize my browser window to become wider I want to execute a slideUp to this blocks so that they're all neatly slided up. Does anyone know how to achieve this?
My jquery function:
function mobileFunctions(){
if($(window).width() < 600){
$(".replace-url").attr('href', '#');
$(".list-categories li").removeClass('click');
categoryActive();
}
}
function categoryActive(){
$(".title-click").click(function(){
var e = $(this).parent("li");
var i = ".list-categories li";
var c = "active";
var d = ".content-category";
if(!$(e).hasClass(c)){
$(i).removeClass(c);
$(i).children(d).slideUp("slow");
}
$(e).children(d).slideDown("slow");
$(e).addClass(c);
});

I believe you are looking for this?
$('window').resize(function() {
var someValue = 1024;
if ($('window').width() > someValue) {
// function here...
}
});