We Keep Coding

How to expand the video container smoothly as it comes to viewport in Nuxtjs

I have to make a webpage very similar to this one. I'm using Nuxt for this, I'm facing issues in making the video expand & shrink in the exact same way.
I've tried to replicate the issue on StackBlitz here. The directive is not working correctly actually. I want to achieve exactly the same transition as soon as the video enters into the view-port.
Code of the custom directive -
export default {
directives: {
inView: {
isLiteral: true,
inserted: (el, binding, _) => {
const isInView = () => {
const rect = el.getBoundingClientRect();
const inView = (rect.width > 0 && rect.height > 0 && rect.top >= 0 &&
(rect.bottom + 100) <= (window.innerHeight || document.documentElement.clientHeight));
if (inView) {
el.classList.add(binding.value);
// window.removeEventListener('scroll', isInView);
} else {
el.classList.remove(binding.value);
}
};
window.addEventListener('scroll', isInView);
isInView();
}
}
}
}

Instead of a scroll listener, use an IntersectionObserver to track when the element comes in or out of view. The following observer creates an IntersectionObserver with a 30% threshold, adding the binding.arg value as a CSS class to the element when in view:
export default {
directives: {
inView: {
mounted(el, binding) {
const threshold = 0.3 // trigger callback when element is 30% in view
const observer = new IntersectionObserver(entries => {
const elem = entries[0]
if (elem.intersectionRatio >= threshold) {
el.classList.add(binding.arg);
} else {
el.classList.remove(binding.arg);
}
}, { threshold })
observer.observe(el)
binding.instance.observer = observer
},
unmounted(el, binding) {
binding.instance.observer.disconnect()
},
}
},
}
Then use the directive on the video-wrapper element to animate (where scale is the animating class):
<div v-in-view:scale class="video-wrapper">
demo

How to stop click event on resize & load if screen width is greater than?

I am facing this problem over and over again and just don't know how to solve this. I have a click event that I would like to fire only if the screen width is less than **576px* and if a page is loaded to make this event fire.
But when I resize the browser larger than 576px the click event still works.
Can someone please help me out how can I solve this common issue that I am facing?
Thanks in advance.
My code:
const onSearchMobile = () => {
let screenWidth = window.innerWidth;
let searchIcon = document.querySelector('.main-header__search--icon');
if (screenWidth <= 576) {
console.log('Yes lower then 576');
searchIcon.addEventListener('click', () => {
console.log('clicked!');
});
}
};
window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);

Just check the width inside event
const onSearchMobile = () => {
let screenWidth = window.innerWidth;
let searchIcon = document.querySelector('.main-header__search--icon');
searchIcon.addEventListener('click', () => {
if (screenWidth <= 576) {
console.log('clicked!');
}
});
};
window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);
Using MediaQueryList.onchange
let searchIcon = document.querySelector('.main-header__search--icon')
let clickListener = () => console.log('clicked!')
let mql = window.matchMedia('(max-width: 576px)')
mql.addEventListener("change", (e) => {
if (e.matches) {
searchIcon.addEventListener('click', clickListener)
} else {
searchIcon.removeEventListener('click', clickListener)
}
})

You can remove eventListener:
const onSearchMobile = () => {
let screenWidth = window.innerWidth;
let searchIcon = document.querySelector('.main-header__search--icon');
if (screenWidth <= 576) {
console.log('Yes lower then 576');
searchIcon.addEventListener('click', () => {
console.log('clicked!');
});
}
else {
searchIcon.removeEventListener('click');
}
};
window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);

Vue: issue applying class when element is not in view

I want to apply a class to a DOM element only when this element is in view inside my viewport (any part of it appearing on screen), however my console log says it's always not in view so the css class is not being applied. For this purpose I'm using a vue directive and a scroll event listener, here is my directive:
Vue.directive('focus-toggle-class', {
isLiteral: true,
inserted: (el, binding, vnode) => {
let scrolled = false;
let rect = {};
let checkInView = function(){
if (inView) {
el.classList.add(binding.value);
console.log('in view');
}
else{
el.classList.remove(binding.value);
console.log('not in view');
}
};
window.addEventListener('load', function() {
rect = el.getBoundingClientRect();
console.log(rect);
checkInView();
window.addEventListener('scroll', function() {
scrolled = true;
});
});
let inView = (
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
)
let timeout = setInterval(function() {
if (scrolled) {
scrolled = false;
checkInView();
}
}, 2000);
}
});

Adding a conditional event listener on page Y scroll

I am trying to add a css class to my sticky navbar when I scroll down on an interior page. I cannot get the event listener to console.log anything when scrolling down. What am I missing/doing incorrectly?
jQuery(document).ready(function($) {
// call resizeHeader() onload if not home page
if (top.location.pathname !== '/') {
window.onload = resizeHeader()
}
//resize header func
function resizeHeader() {
window.addEventListener('scroll', function(){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 1
nav = document.querySelector(".navbar")
if (distanceY > shrinkOn) {
console.log('scrolled')
nav.classList.add("smallerNav")
} else {
if (nav.classList.contains("smallerNav")) {
console.log('back to top')
nav.classList.remove("smallerNav")
}
}
})
}
})

How to make two different functions work on window resize

I want to make a sticky banner, which becomes fixed at top when it is scrolled and unsticks at the end of the page. The document height is dependent upon images, that's why I use window load event. I have the following code:
function saleBanner() {
$(window).bind("load", function() {
// Make sale banner fixed-at-top
var s = $('.sale-container');
var pos = s.offset();
var maxTop = $(document).outerHeight() - 828 - s.outerHeight(); // 828 is the total height of site footer and sign up form
function fixedBanner() {
var currentTop = $(window).scrollTop();
if (currentTop >= pos.top && currentTop < maxTop) {
s.attr("style", ""); //kill absolute positioning
s.addClass('fixed-at-top'); //stick it
} else if (currentTop >= maxTop) {
s.removeClass('fixed-at-top'); //un-stick
s.css({bottom: 0}); //set sticker right above the footer
} else {
s.removeClass('fixed-at-top'); //top of page
}
}
$(window).scroll(fixedBanner);
});
}
saleBanner();
I want to make this function work on window resize as well. So I added the following code:
function resizeBanner() {
var viewportWidth = $(window).width();
if (viewportWidth > 767) {
saleBanner();
}
}
I have one more function resizeWindow for mobile menu, which I also need to work on window resize. So when I put this two functions together, they don't work (although they work on window resize separately):
$(window).resize(function(e) {
resizeWindow(e);
resizeBanner(e);
});
Where is my mistake? How can I make both functions work on window resize?
Update: Here is the whole code for resizeWindow function. It's rather long, but may be it would be helpful for the answer.
// Mobile menu
var MQM = 768;
var viewportWidth = $(window).width();
function navSlide() {
var headerHeight = $('.cd-header').height();
$(window).on('scroll', {previousTop: 0}, function () {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop ) {
//if scrolling up...
if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
$('.cd-header').addClass('is-visible');
} else {
$('.cd-header').removeClass('is-visible is-fixed');
}
} else {
//if scrolling down...
if(!$('.cd-header').hasClass('menu-is-open')) {
$('.cd-header').removeClass('is-visible');
}
if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
// Primary navigation slide-in effect on load
if(viewportWidth < MQM) {
navSlide();
}
function addOverflow() {
$('html').addClass('overflow-hidden');
$('body').addClass('overflow-hidden');
}
function removeOverflow() {
$('html').removeClass('overflow-hidden');
$('body').removeClass('overflow-hidden');
}
function hideHeader() {
$('.cd-header').removeClass('is-fixed is-visible');
}
function hideMenu() {
$('.cd-header').removeClass('menu-is-open is-fixed is-visible');
$('.cd-menu-icon').removeClass('is-clicked');
}
function resizeWindow() {
var viewportWidth = $(window).width();
$(window).off('scroll'); // unbind scroll event
if (viewportWidth > 767) {
if ($('.cd-primary-nav').hasClass('is-visible')) {
if ($('.algolia__search-content').hasClass('algolia__search-content--active')) {
hideMenu();
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
} else {
hideMenu();
if (!$('.js-algolia__input').is(':focus')) {
$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
removeOverflow();
});
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
} else {
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
}
}
} else {
hideHeader();
}
} else {
navSlide();
if ($('.cd-primary-nav').hasClass('is-visible')) {
$('.cd-header').addClass('menu-is-open');
$('.cd-menu-icon').addClass('is-clicked');
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
}
}
}