While working on a SPA I had some CSS that I was applying on the click of a button.
When the button was clicked, it would make one or the other DIVs go fullscreen (except for a small portion at the top where the nav bar was).
Imagine you have these two divs — one yellow and one cyan;
#first{
background: yellow;
}
#second{
background: cyan;
}
Then when you click a button in the navbar it would make one or the other go fullscreen by applying a fullscreen CSS class.
It worked great & I was very happy with the simplicity of it all.
If you really want to see it work (toggle), take a look at this simple jsfiddle[^].
.fullScreen{
width: 100%;
height: 90%;
z-index: 20;
position: absolute;
top: 12%;
padding: 10pt;
}
Here’s the button click code.
// select the div and add the style
document.querySelector("#first").classList.add("fullScreen");
// remove style from other div so it isn't fullscreen
document.querySelector("#second").classList.remove("fullScreen");
// vice versa for the other div -- not showing all the toggle code
It Worked, Then Didn’t!
It was all working. I copied the code to another project and had it all set up.
But suddenly clicking the button wouldn’t do the fullscreen. I tried all manner of things.
Was the button click working? I added an alert() and saw the button was working.
I was going out of my bleedin’ mind.
Then I looked real hard at the styles that I had copied to the new project.
Can You See It?
Do you see the problem?
#first{
background: yellow;
}
#second{
background: cyan;
};
.fullScreen{
width: 100%;
height: 90%;
z-index: 20;
position: absolute;
top: 12%;
padding: 10pt;
}
Oy!! I have only myself to blame.
As Sophocles said:
The keenest sorrow is to recognize ourselves as the sole cause of all our adversities.
Sophocles was obviously a software developer.