5 Correct answers
Created a page for a friend using intersection observer js where the divs/images should appear as you scroll down except something is stopping it from scrolling further than the visible page-
https://andylilien.com/generalreel/
but works on mine with the same script and relevant css
https://toddheymandirector.com/reel/
Ive tried overflow:scroll etc nothing has worked
thoughts?
By @REELHERO
Badly formatted code is causing the problem, as a result the </body> tag is unclosed. Is the editor you are
...
Not sure about the css aspect, it's not really my strong point. I don't know if css can toggle anything onclick or hold it's state, probably but I don't major on css a great deal .
It's easily achieved with a bit of javascript (see code example below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bento Box Icon</title>
<style>
body {
background-color: #21252b;
}
.bento_box_wrapper {
display: grid;
grid-template-columns: repeat(3, 6px);
gap: 6px;
width: 30px;
height: 30px;This might be a bit more useful, I would try and cut down on the amount of containers where possible as it makes trouble shooting and management a lot lot easier.
<header>
<div class="socialMedia">
<a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/email.svg" alt=""></a>
<a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/insta.svg" alt=""></a>
<a href="https://toddheymandirector.com/"><img src="https://andylilien.com/isorry for all the replies - it was a toggle postioning class that was superfluous - i removed it and it centers-
By @REELHERO
That is what I suggested in my reply to you. Using position absolute takes the container out of the html workflow so the siteTitle moves into the 'vacant' space. i.e., there is effectively only 2 containers in the 'header' and using 'justify-content: space-between' set on the 'header' css does exactly that, spaces the containers to the extreme left/right. When the 3rd con
...
Just a slight adjustment of the 'toggle' function shown in bold/red below is that the effect you require?
toggle.onclick = function() {
// Animate burger icon
this.classList.toggle('active');
// Check if state of overlayWrapper and assign correct css class
if(overlayWrapper.classList.contains('fadeInOverlay')) {
let i = mainNavLinks.length - 1;
setInterval(function(){
if(i < 0) {
return false;
}
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.class
28
Replies
can you explain to me what wasnt working with the other code? and what you modified if you dont mind?
By @REELHERO
I did that already in the reply I gave.........the toggle function was only originally set up to 'promptly' hide the overlay. The subtle down animation of the navigation links only worked when one of then was clicked and after one second the user was whisked away to the correct page. I guess we never considered that someone might just be toggling the overlay.
AdChoices