Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Getting Started with CSS Intro to CSS Review

Miguel Nunez
Miguel Nunez
3,266 Points

So Is it possible to stay in a full screen menu and press buttons to change elements well still stuck in there?

I want to press a menu button on my website once I do that a menu pop up but I'm trying to stay in that full screen menu and change elements by press buttons its like a video game where you press start on ps3 remote and it gives a menu of options and you can navigate in that video game menu to different pages once you press start again it goes back to the game i'm not trying to create a game i'm giving an example what I want to do on a website with that kind of method heres the example http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2 and I want to stay in that black menu and navigate in that black menu with different elements changing every time I clink a link or a button in that full screen menu is this possible and how would I do that?

1 Answer

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Short answer: Yes, with JavaScript.

In JavaScript you can make any element "request full screen". If you do that with a div that haș interactive elements or buttons inside, they'll still be there and function when the div goes into full screen mode. CSS styling for full screen divs is doable too.

EDIT: Although now that I think about it, you might be more interested in an overlay. In short, you can do that with JavaScript too.

This won't necessarily keep all interactions within the fullscreen div though, you'd need to keep it all 'client-side', i.e. JavaScript based menu screens.

But it's a good start.

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

I haven't done much back-end programming, but is there any particular reason why all the interaction would need to be "client-side"? Would interacting with a server in a full-screen div be any different than interacting with a server in a not-full-screen div?

Claudiu Bancos, yes, according to the Fullscreen API page on MDN:

"In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well."

Navigating to another page typically means another request to the server and a full response including another HTML page. If you instead were using some sort of JavaScript to just manipulate the elements on the current, fullscreen page, it wouldn't exit.

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Well yes, it's not going to navigate to a different website while staying in full screen mode. It can still "navigate" to a different "page" by hiding and showing divs, without ever truly leaving the website page. I meant more that it could still pull data from a server, or otherwise interact with a server in any way that doesn't involve navigation to a different web page.