We Keep Coding

How to add or remove function based on innerWidth JavaScript native

Currently I'm trying to add/remove function when screen width is bigger than or less than, but code below not working, any suggestions?
window.addEventListener('resize', () => {
if(window.innerHeight > 768){
window.addEventListener('scroll', scrolling);
}else{
window.removeEventListener('scroll', scrolling);
sectionFixedNavLeftSide.firstElementChild.classList.remove('fixed-sidebar-home');
sectionFixedNavLeftSide.firstElementChild.classList.remove('fixed-bottom-sidebar')
}
});
callback scrolling:
const scrolling = () => {
sectionFixedNavLeftSide.getBoundingClientRect().top <= (screen.width /
50 * 2.7) ?
sectionFixedNavLeftSide.firstElementChild.classList.add('fixed-
sidebar-home') :
sectionFixedNavLeftSide.firstElementChild.classList.remove('fixed-
sidebar-home');
sectionFixedNavRightSide.getBoundingClientRect().bottom - screen.width
/ 2.85 <= 0 ?
sectionFixedNavLeftSide.firstElementChild.classList.add('fixed-bottom-
sidebar') :
sectionFixedNavLeftSide.firstElementChild.classList.remove('fixed-
bottom-sidebar');
}

Javascript function based on viewport visibility works on desktop but not on smartphones?

I'm having trouble with some Javascript I used for a site.
The aim was to have a header elements css changes based on the appearance on screen of a specific div.
Actually it works just perfectly on desktop ! But not on Iphones...
I can't figure out what's wrong with it...
Can you help me understand this ?
Thanks alotlotlot !
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var section_clouds = document.querySelector('#section_intro_clouds');
window.addEventListener('transitionend', function (event) {
if (isInViewport(section_clouds)) {
document.getElementById('header_blanc').classList.add('colorer_bleu');}
else {document.getElementById('header_blanc').classList.remove('colorer_bleu');}
}, false);

Transition and Animation for Horizontal website

I am creating a horizontal website. And i want to apply the transitions and animations to the elements when they display on the screen. But now, at the loading of the page itself all the transitions and animations are applying for all elements. I tried (:visible) but it didn't work. So please guide me how to apply transition to elements when they display on screen.
Thanks in advance.

Check whether DOM element is visible in current viewport or not.
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
if(rect.width!=0&&rect.height!=0&&$('#timeline').is(":visible")) {
return (
rect.top > 0 &&
rect.left > 0 &&
rect.bottom < (window.innerHeight || document.documentElement.clientHeight) &&
rect.right < (window.innerWidth || document.documentElement.clientWidth)
);
}else{
return false;
}
}
pass HTMLElement as an argument to this function and it will return whether it is visible in the current viewport or not.
Fire events to recheck the condition
window.addEventListener("load", function-tocheck-viewport-visibility);
window.addEventListener("resize", function-tocheck-viewport-visibility);
window.addEventListener("scroll", function-tocheck-viewport-visibility);

Lazy loading images on mobile

I'm using this lazy loading code.
JS CODE:
$(window).on('scroll touchmove', function(){
if( $('.touch').length) {
var images = $('.theme-slider img[data-lazy]');
images.each(function(index){
if(isElementVisible(this)) {
$(this).attr('src', $(this).attr('data-lazy'));
$(this).removeAttr('data-lazy');
}
})
if(images.length == 0) {
$(window).off('scroll touchmove');
}
}
});
// Checking if an image is within the viewport
function isElementVisible(el){
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight) &&
rect.right <= (window.innerWidth)
);
}
My problem is on iPhone when I'm scrolling horizontal if the image has entered the viewport it doesn't load, I have to scroll back and forward until it works.
Any ideas how I can solve it?

Re-sizing an image with Javascript if image is bigger than the viewport

Currently I am working off of this code to resize an image with javascript
function resize(which) {
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
if (max == undefined) {
if (elem.width > document.documentElement.clientWidth) {
} else if (elem.height > document.documentElement.clientHeight) {
} else if (elem.height > document.documentElement.clientHeight && elem.height > document.documentElement.clientWidth) {
}
}
if (elem.width > elem.height) {
if (elem.width > max)
elem.width = max;
} else {
if (elem.height > max)
elem.height = max;
}
}
I was wondering if I am heading in the right direction to resize an Image with javascript if the image is bigger then the clients viewport. I'd like some help with this also as I don't know what to do next to finish the code. Thanks. :)

A similar question has been asked before:
Image resize to fit screen
Also, this jQuery plugin seems to do exactly what you need:
http://code.google.com/p/jquery-imagefit-plugin/
if you perform it on a 100% height, 100% width element:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
Here's an example of this solution:
http://jsfiddle.net/nottrobin/zndkg/