asasass
February 20, 2024, 1:22pm
1
Code: https://jsfiddle.net/Lr3wgk5s/
Code that uses modal to compare: https://jsfiddle.net/y8zc3fjk/1/
1st issue)
Splash screen is not appearing after exit button is clicked
2nd) Another is the footer,
Is there a way for it to be written in the html one time?
Anything else you think should be adjusted?
<div class="splash-screen">
<div class="circle">
<svg class="box" width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
<rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
<rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
<rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
<rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
<rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
<rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
<rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
<rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
<rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
<rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
<rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
<rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
<rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
<rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
<rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
<rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
</svg>
</div>
</div>
<div class="containerA">
<div class="curtain1 ">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="video-one "></div>
<div class="wrap hide">
<div class="video video-frame" data-id="djV11Xbc914"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial"></div>
</div>
</div>
<div class="outer-container ">
<div class="containerB hide">
<div class="splash-screen2">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
<div class="container">
<div class="curtain">
<div class="ratio-keeper ">
<div class="video-two"></div>
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-three"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-four"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-five"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-six"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
<div class="footer"></div>
</div>
</div>
<div class="containerC hide">
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="video-seven"></div>
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-eight"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-nine"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-ten"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-eleven"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj"></div>
</div>
<div class="blog-pager">
<a title="Exit" aria-label="Close"></a>
</div>
<div class="footer"></div>
</div>
</div>
</div>
1 Like
asasass
February 20, 2024, 3:10pm
2
Change I made: https://jsfiddle.net/vwjyo6h4/3/
.containerA {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/* Enable scroll if needed */
background-color: transparent;
}
Replacing this:
containerA {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
/*min-width: 255px;*/
display: flex;
padding: 8px 8px;
}
At the code here I got the 2nd one working: https://jsfiddle.net/6jr2tdob/
2nd splash screen works.
Is there supposed to be a hide added to it here?
<div class="splash-screen2 hide">
Maybe, no, if I have the z-index correct?
I am not sure.
function showSplashScreen(splashScreenSelector ) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.classList.add("hide");
console.log("splash2");
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage() {
showSplashScreen(".splash-screen2");
hideContainer(".containerA", ".containerC");
showContainer(".containerB");
}
asasass
February 20, 2024, 5:16pm
3
In the modal code:
hide was not added to this:<div class="splash-screen2 hide">
For the footer, would something like this work? https://jsfiddle.net/dsozpaut/2/
I am not sure how it would be written into the code.
.outer-container{
}
.footer{
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 59px;
}
footer.hide {
display: none;
}
<div class="footer"></div>
</div>
function showFooter(footerSelector) {
const footer = document.querySelector(footerSelector);
footer.classList.remove("hide");
}
function resetPage() {
showSplashScreen(".splash-screen2");
hideContainer(".containerA", ".containerC");
showContainer(".containerB");
showFooter(".footer");
}
asasass
February 21, 2024, 3:29am
4
What I have now: https://jsfiddle.net/a865k14g/5/
<div class="splash-screen">
<div class="circle">
<svg class="box" width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
<rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
<rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
<rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
<rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
<rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
<rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
<rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
<rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
<rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
<rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
<rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
<rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
<rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
<rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
<rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
<rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
</svg>
</div>
</div>
<div class="containerA">
<div class="curtain1 ">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="video-one "></div>
<div class="wrap hide">
<div class="video video-frame" data-id="djV11Xbc914"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial"></div>
</div>
</div>
<div class="splash-screen2 ">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
<div class="outer-container hide">
<div class="containerB ">
<div class="container">
<div class="curtain">
<div class="ratio-keeper ">
<div class="video-two"></div>
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-three"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-four"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-five"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-six"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
</div>
<div class="splash-screen3 hide">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
<div class="containerC hide">
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="video-seven"></div>
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-eight"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-nine"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-ten"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-eleven"></div>
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj"></div>
</div>
<div class="blog-pager">
<a title="Exit" aria-label="Close"></a>
</div>
</div>
</div>
<div class="footer"></div>
</div>
javascript:
1st exit button
function hideSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.classList.add("hide");
console.log("splash2");
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function showFooter(footerSelector) {
const footer = document.querySelector(footerSelector);
footer.classList.remove("hide");
}
function resetPage() {
hideSplashScreen(".splash-screen2");
hideContainer(".containerA", ".containerC");
showContainer(".outer-container");
//showFooter(".footer");
}
2nd exit button:
function showSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.style.pointerEvents = "auto";
splashScreen.classList.remove("hide");
splashScreen.offsetWidth = splashScreen.offsetWidth;
//window.getComputedStyle(splashScreen).getPropertyValue("width");
splashScreen.classList.add("hide");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
});
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage2() {
showSplashScreen(".splash-screen3");
showContainer(".containerC");
}
asasass
February 21, 2024, 3:47am
5
At the code here: https://jsfiddle.net/a865k14g/9/
If I remove this: footer is hidden.
.containerB .container,
.containerC .container {
z-index: -1;
}
With the z-index in there like that:
Footer is stuck at the top:
in the code that uses modal:
https://jsfiddle.net/y8zc3fjk/1/
Footer is at the bottom:
I don’t know how that happened.
Aren’t they both written the same way in the html and css?
How would I fix the one where the footer is stuck at the top?
So it is at the bottom like the code that uses modal?
PaulOB
February 21, 2024, 11:11am
6
That’s because all your containers are absolutely placed so effectively they all sit on top of each other.
You can’t have a footer at the bottom of all those absolute elements because it won’t know where the bottom is. It will just sit at the top as though nothing else was on the page.
It might be possible to just remove the footer div and place a pseudo element at the bottom of each container by default.
e.g.
/*
.footer {
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 59px;
}
*/
.container:after {
content:"";
display:block;
box-sizing: border-box;
border-top: 1px solid green;
background: yellow;/* yellow just so I could see it*/
height: 59px;
margin: 0 -8px -8px;
}
That should have the same effect with any luck as long as you were consistent.
Alternatively you could remove the absolute positioning from here.
.container {
/*position: absolute;*/
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
But that will mean that your containerC will be below the containerB because you don’t remove it with display:none when you go to the next one (as you do with containerA).
As I have said a number of times these are ill thought out approaches that are reverse engineering previous attempts ending with spaghetti code. It’s ok if you are just playing around and checking things out but is not the optimal way to design with a finished product.
Also, I have mentioned this several times now that if you put padding on elements that have 100% height (or min-height) then that will cause a scrollbar when none is needed. I have offered you the border box model code but you keep ignoring it and thus keep suffering from multiple scrollbars.
1 Like
asasass
February 21, 2024, 11:30am
7
Can you show me the border box model code one more time?
asasass:
border box model
That article explains what it refers to as the “standard” and “alternative” box models. The alternative is the one Paul is referring to, and the article explains how both work.
1 Like
asasass
February 21, 2024, 12:05pm
9
I did not know I was supposed to remove .containerB
I did that here: https://jsfiddle.net/40efryc7/1/
function hideContainer2(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function resetPage2() {
hideContainer(".containerB");
}
Next: You said to do this:
.container {
/*position: absolute;*/
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
Doing that does this to the footer:
asasass
February 21, 2024, 12:13pm
10
How do I make the border line go all the way across?
I now have this: https://jsfiddle.net/wazgenpd/2/
.container {
flex: 1 0 0;
padding: 8px 8px;
}
.container:after {
content: "";
display: block;
box-sizing: border-box;
border-top: 1px solid red;
background: #121212;
height: 59px;
margin: 0 -8px -8px;
}
I re-enabled footer: https://jsfiddle.net/bgz5hq80/1/
Removed: .container:after {
It is now fixed.
.footer {
box-sizing: border-box;
border-top: 1px solid red;
background: #121212;
height: 59px;
}
.footer {
margin: 0 -8px;
}
asasass
February 21, 2024, 12:34pm
11
I have a question:
Using flex: https://jsfiddle.net/bgz5hq80/1/
.container {
flex: 1 0 0;
padding: 8px 8px;
}
I have to use 59px to equal 108px height:
.footer {
box-sizing: border-box;
border-top: 1px solid red;
background: #121212;
height: 59px;
}
If I use absolute: https://jsfiddle.net/6gnjdp7y/2/
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
108px equals 108px.
.container:after {
content: "";
display: block;
box-sizing: border-box;
border-top: 1px solid red;
background: #121212;
/* yellow just so I could see it*/
height: 108px;
margin: 0 -8px -8px;
}
or if I do:
.container {
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
59px here equals 108px: https://jsfiddle.net/6gnjdp7y/4/
.footer {
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 59px;
}
Why is that?
I can just leave:
.container {} empty.
And that works fine. https://jsfiddle.net/6gnjdp7y/6/
.footer {
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 74px;
}
.footer {
margin: 0 -8px;
}
PaulOB
February 21, 2024, 1:47pm
12
You know how to do that because you were doing it for the body padding! You now have 8px padding on the container so you need a negative margin of 16px to stretch through both.
.container:after {
content: "";
display: block;
box-sizing: border-box;
border-top: 1px solid red;
background: #121212;
height: 59px;
margin: 0 -16px -8px;
}
PaulOB
February 21, 2024, 2:11pm
13
No 59px = 59px.
Colour the background of the footer yellow and you will see your mistake.
asasass
February 21, 2024, 2:35pm
14
My mistake is, I should be doing this: https://jsfiddle.net/wqj26oe4/1/
Now, 108px equals 108px.
body {
background: #121212;
padding-top: 50px;
padding-left: 8px;
padding-right:8px;
}
asasass
February 21, 2024, 3:51pm
15
I am stuck here:
Sliding panel: non-model code https://jsfiddle.net/rn7bmjLo/1/
Sliding panel modal code: https://jsfiddle.net/fbaq7vy8/
If modal is not being used in the code, this gets changed to what?
It’s not splitting in half.
Maybe other things get done also?
.modal:not(.open) ~ .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modal:not(.open) ~ .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
Would it be written similar to this one?
.curtain-container.hide{
display:block;
opacity:0;
pointer-events:none;
}
.curtain-container:not(.hide) > .curtain-left {
transform: translateX(calc(-100% - 1px));
visibility: visible;
/*pointer-events:initial;*/
}
.curtain-container:not(.hide) > .curtain-right {
transform: translateX(calc(100% + 1px));
visibility: visible;
/*pointer-events:initial;*/
}
PaulOB
February 21, 2024, 4:23pm
16
You probably need this as you don’t have a modal anymore.
.hide + .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.hide + .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
That’s for the first one (haven’t checked any others).
1 Like
asasass
February 21, 2024, 4:50pm
17
Both work.
Does this one need to be changed at all? https://jsfiddle.net/yavpc21e/
Does :not get removed from it or something like that?
.curtain-container.hide{
display:block;
opacity:0;
pointer-events:none;
}
.curtain-container:not(.hide) > .curtain-left {
transform: translateX(calc(-100% - 1px));
visibility: visible;
/*pointer-events:initial;*/
}
.curtain-container:not(.hide) > .curtain-right {
transform: translateX(calc(100% + 1px));
visibility: visible;
/*pointer-events:initial;*/
}
PaulOB
February 21, 2024, 7:12pm
18
Those rules slide the curtain-left and curtain-right and seem to be working. Was there an issue?
asasass
February 22, 2024, 12:23pm
20
Question: Why does one use or need offsetWidth and the other doesn’t?
sliding curtain here does not use offsetWidth in the javascript.
sliding curtain modal removed : https://jsfiddle.net/y3betu69/
splash screen uses offsetWidth in the javascript.
splash screen modal removed : https://jsfiddle.net/h5axonzc/
function showSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.style.pointerEvents = "auto";
splashScreen.classList.remove("hide");
splashScreen.offsetWidth = splashScreen.offsetWidth;
//window.getComputedStyle(splashScreen).getPropertyValue("width");
splashScreen.classList.add("hide");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
});
}
Question : In the code here, which scrollbar are you referring to that is not needed?
https://jsfiddle.net/h5axonzc/
When either the splashscreen or slider is visible on the screen.
Is that the one you are referring to?
This one should be removed?
The scrollbar there?
