CSS & Sophocles, more related than you know

raddevus

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.

Jeremy Falcon

raddevus wrote:

Do you see the problem?

Don't see the reason for it off the top of my head. Absolute should work with a static parent. Usually when stuff is not shown and it's not a display issue (or no content) then it's related to height. As body height needs to be set as well, etc. So that would be my guess. Couple points about your code though... I urge you to consider never, ever doing that again though. :laugh: You don't need to hard code offsets, as that'll just make things harder to maintain. And, this day and age we should be using flexbox for layout. And yes that includes fullscreen dialogs. It'll keep things organized sooo much better and if you ever need to stack a dialog on top of your main content or stack multiple dialogs, then it'll make your life easier. Also, never, ever use height 100% in that manner. :) There are better ways now. That was the trick 20 years ago. These days it's much, much better to use viewport units for layout. Height 100% means 100% of the parent. That trick only only worked when you set both the html and body tag to height 100%. I still set both html and body out of habit for viewport, but there's no need for that now. Just use viewport units with the added benefit of being semantic. Also, consider using the semantic dialog tag. It'll fall back to a regular div on non-supported browsers. But if the intent is to have a fullscreen dialog show, then it'll help screen readers know what's up. Tossed together a fiddle for poops and giggles. [Clickety](https://jsfiddle.net/jfalcon/082e4drt/47/)

Jeremy Falcon

RickZeeland

Not a Javascript programmer, but I guess the extra semicolon?

Peter_in_2780

Be thankful it's CSS not Python. Then your bug would be invisible.

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

raddevus

You got it! It was the semicolon located after the second style. That just blew my mind! I will make no more mistakes with semicolons (he said doubting himself). :rolleyes:

#first{
background: yellow;
}

#second{
background: cyan;
}; /* <============= this semicolon makes the .fullScreen ineffective!!!! */

.fullScreen{
width: 100%;
height: 90%;
z-index: 20;
position: absolute;
top: 12%;
padding: 10pt;
}

raddevus

Wow, thanks for the tips. I really appreciate it. I was just going for the absolute quickest way I could get a div to go fullscreen. I will examine the JSFiddle more closely and make some changes. Thanks again. :thumbsup:

Jeremy Falcon

Any time, buddy.

Jeremy Falcon

Jeremy Falcon

Ha ha ha ha ha. I totally missed that. Awesome catch.

Jeremy Falcon

Jeremy Falcon

Just checked the fiddle again and there was a tiny bug in it with the hidden style. If the dialog tag is supported then most browsers apply an automatic user agent style to it. So, forgot to add padding and margin resets in the class. This fixes it: [Clickety](https://jsfiddle.net/jfalcon/082e4drt/52/). So should work if you apply the hidden class to either the popup or the main tag. It's worth noting this isn't an modal or modeless overlay dialog anymore, but quite literately replaces the main content while still allowing for having a nav bar up top. If it were an overlay that just covered the whole thing (drop shadow etc.) then absolute positioning is the way to go. But, IMO overlays don't look nearly as modern as this does.

Jeremy Falcon

raddevus

Thanks, I forked it and got to this which works for my needs[^]. I just need to "fullscreen" a div if the user wants to so the div can be seen / interacted with more easily on a phone.

Jeremy Falcon

Noice

Jeremy Falcon

TNCaver

I have similar code I used to swap between dark and light theme css file, selected via a checkbox:

There are no solutions, only trade-offs.
- Thomas Sowell

A day can really slip by when you're deliberately avoiding what you're supposed to do.
- Calvin (Bill Watterson, Calvin & Hobbes)

Richard Deeming

For modern browsers, you could do that without any JavaScript. Set up the colours to use as CSS variables / properties[^] in the :root context; use those variables throughout the stylesheet; and use the :has selector[^] to switch between dark and light themes. :)

:root {
--background-color: white;
--text-color: black;
}

body:has(input[id='chkSwitchTheme']:checked) {
--background-color: black;
--text-color: white;
}

Demo[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

TNCaver

Interesting, and good to know. I'm way behind on modern CSS.

There are no solutions, only trade-offs.
- Thomas Sowell

A day can really slip by when you're deliberately avoiding what you're supposed to do.
- Calvin (Bill Watterson, Calvin & Hobbes)