I’m developing a web app for managing and displaying countdowns. The goal is to control the timers on my main screen while showing them fullscreen on a second monitor. Here’s what I’m aiming for:
Main screen: Start, pause, and modify countdowns
Secondary screen: Display countdowns in fullscreen mode
I’ve got the countdown logic working, but I’m stumped on how to make it appear on the second screen. Is there a way to open a new window that automatically goes fullscreen on the secondary monitor using JavaScript and HTML?
I’ve tried window.open(), but it just creates a regular window on the main screen. Any ideas on how to target a specific monitor and force fullscreen mode? Thanks for your help!
I’ve implemented a similar solution for a digital signage project using the Screen API together with window.open(). In my experience, you can detect available screens by examining properties such as window.screen.availLeft and window.screen.availWidth, then open a new window with a left coordinate that targets the secondary display. You can then adjust its position using window.moveTo() and trigger fullscreen mode by calling requestFullscreen() on the document element of that window. Keep in mind that most browsers require explicit user interaction to enable fullscreen mode, and security restrictions may vary between environments. Thorough testing across different browsers and setups is essential.
As someone who’s worked on multi-monitor setups for event management, I can share a few insights. While the Screen API is useful, it’s not foolproof across all browsers and OSes. One workaround I’ve found effective is creating a configuration page where users can manually position the countdown window. This gives more control and reliability.
For the fullscreen part, you’re right that user interaction is usually required. A neat trick is to add a clearly visible ‘Go Fullscreen’ button on the secondary window. This satisfies the interaction requirement and gives a smooth user experience.
Remember to test extensively, especially on the actual hardware you’ll be using. Different OS/browser combinations can behave unexpectedly with multiple monitors. Also, consider adding keyboard shortcuts for quick adjustments during live events – they’re lifesavers when you need to make rapid changes.
hey, i’ve dealt with this before. you can use the window.screen object to get info about connected displays. then use window.open() with specific coordinates to target the secondary screen. for fullscreen, try calling requestFullscreen() on the new window. might need user interaction tho. good luck!