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
This could be a factor.
A page which is secured with SSL (or TLS) cannot be accessed via HTTP, as that would mean that the page is not secured anymore. To redirect http URLs to https, you can rewrite the URL to use https instead of http. HTTPS is HTTP with encryption and verification, and is far more secure than HTTP
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 using NOT showing the errors?
Marked in bold/red should not be there:
</a>
</div>
</div>
</li>
</ul>
<div class="copyRight">© 2023 Andy Lilien // All Rights Reserved</div>
</div>
<!-- End overlayWrapper-->
There's some issue with the code between the 'header_andy" container. If you remove it the page will scroll.
<div id="header_andy"> </div>
I can't find any reason why the below code should be present?
</div> <!-- End of slider -->
</div>
Make the changes suggested and rebuilt the code between the 'header_andy" container. Something in that is the main culprit I think.
Plus the website is not secure, for some reason. I get a big warning in the browser not to proceed to the page. Only reason I did was because I know you.............so you need to get that fixed as soon as is possible.
I created a bento box menu and Im having trouble getting it to stay in the active state onclick - as soon as you hover away it returns to the original state
https://andylilien.com/index_test.html
click on the upper right menu it will become an "X" but it should stay that way when you navigate to the page options - but it immediately reverts to bento when you move the cursor away - does 'active' not work here?
By @REELHERO
I clicked on it but it doesnt become an X........sort of flashes briefly and goes back to its normal state but I don't see an X at any point?
EDITED.
OK I see what you mean. If I click on it and hold the mouse down it become an X but as soon as I release the mouse it returns to its original format.
Apologies I was traveling for a few days-
I added a height property to the header. modified the type and added a bezier to the slide in of the left and right icons-
https://andylilien.com/narrative/index_test2.html
However the header doesnt stay fixed it scrolls up (thought strangely the bento box does even though its position is relative) - how is that happening with a "fixed" positon property? what am I getting wrong?
also Im still seeing the double scrollbars even thought I changed vw to 100%
By @REELHERO
The 'header' is not observing 'position fixed' because you have assigned a period to the 'header' css making it a 'class' (see in red below). Either remove the period or add the class to the 'header' container, that'll do it.
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
width: 100%;
top: 0;
height:80px;
z-index: 100;
}
Something funky happens to the site title, once you have corrected the above, as a result of the id="toggle" being added to the 'bentoIcon' container, what weird stuff have you got going on in the toggle css, I havent looked as yet?
position: absolute is NOT necessary, neither is the excessive z-index. z-index has already been set on the 'header' which is the parent container and anything inside that will also inherit the z-index.
#toggle {
position: absolute;
z-index: 200000000000000000000000000000000000000000000000000000000000000;
}
Setting position absolute on the 'bentoIcon' container will remove the container from the natural flow of items, hence, the site title thinks it's not there and moves across to consume the space its left.
You cannot have a fraction of a pixel declared like below, it must be a whole number.
letter-spacing: 1.9px;
sorry 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 container is present they are spaced evenly across the width of the header, so the siteTitle will sit in the center of the left/right containers.
Negative margins are not needed in this case as IF done correctly align-items: center; which is applied to the header css should have the effect of vertically centering all the containers in the 'header' parent container.....if that is not happening that is because you have some unecessary css going on to control the child containers and there contents.
Using a negative margin in this case would be viewed as a hack.
As for the menu disappearing it would not be a browser conflict, it would be something you have changed since it was working.
AdChoices