Floating Mini Timer with Document Picture-in-Picture

This guide shows you how to build a small, always-on-top timer that floats above other windows using the Document Picture-in-Picture API. You’ll create a web page with a start/stop button and a reset, then open it in a mini floating window that stays visible while you work in other apps. No special software is needed—just a modern browser like Chrome or Edge.

What You’ll Need

• A computer with Google Chrome or Microsoft Edge (version 116 or later).
• A text editor (like Notepad, VS Code, or any code editor).
• Basic familiarity with HTML and JavaScript (not required but helpful).

Step-by-Step

1. Create the HTML file. Open your text editor and create a new file named timer.html. This will contain the timer’s interface and logic.
2. Set up the basic structure. Add the following code to the file:

   <!DOCTYPE html>
   <html>
   <head>
     <title>Mini Timer</title>
     <style>
       body { font-family: sans-serif; text-align: center; padding: 20px; }
       #time { font-size: 3em; margin: 20px 0; }
       button { font-size: 1.2em; margin: 5px; padding: 10px 20px; }
     </style>
   </head>
   <body>
     <div id="time">00:00:00</div>
     <button id="startStop">Start</button>
     <button id="reset">Reset</button>
     <script>
       // Timer logic will go here
     </script>
   </body>
   </html>

3. Add the timer logic. Inside the <script> tag, add the following JavaScript:

   let startTime = null;
   let elapsed = 0;
   let running = false;
   let intervalId = null;
   
   const timeDisplay = document.getElementById('time');
   const startStopBtn = document.getElementById('startStop');
   const resetBtn = document.getElementById('reset');
   
   function formatTime(ms) {
     const totalSeconds = Math.floor(ms / 1000);
     const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
     const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
     const seconds = String(totalSeconds % 60).padStart(2, '0');
     return `${hours}:${minutes}:${seconds}`;
   }
   
   function update() {
     if (running) {
       elapsed = Date.now() - startTime;
       timeDisplay.textContent = formatTime(elapsed);
     }
   }
   
   startStopBtn.addEventListener('click', () => {
     if (running) {
       clearInterval(intervalId);
       running = false;
       startStopBtn.textContent = 'Start';
     } else {
       startTime = Date.now() - elapsed;
       running = true;
       startStopBtn.textContent = 'Pause';
       intervalId = setInterval(update, 100);
     }
   });
   
   resetBtn.addEventListener('click', () => {
     clearInterval(intervalId);
     running = false;
     elapsed = 0;
     timeDisplay.textContent = '00:00:00';
     startStopBtn.textContent = 'Start';
   });

4. Save the file. Save timer.html in a convenient location, like your Desktop or Documents folder.
5. Open the timer in your browser. Double-click the file, or drag it into a Chrome or Edge window. The timer page will open as a normal tab.
6. Launch the floating window. In the browser tab, right-click anywhere on the page and select “Picture in Picture” from the context menu. (Alternatively, you can use the keyboard shortcut: Ctrl+Shift+P on Windows, or Cmd+Shift+P on Mac.) The timer will pop out into a small floating window.
7. Use the floating timer. The floating window stays on top of other apps. Click the Start button to begin counting, Pause to stop, and Reset to zero. You can resize the window and move it anywhere on your screen.

Common Mistakes

• Using an unsupported browser: The Document Picture-in-Picture API only works in Chromium-based browsers like Chrome and Edge. Firefox and Safari won’t show the “Picture in Picture” option for arbitrary web pages.
• Not using the right context menu: Right-clicking on a video or image may show a different Picture-in-Picture option. Make sure you right-click on a blank area of the page (not on a button or text).
• Forgetting to save the file: If you edit the HTML after opening it in the browser, you need to save the file and refresh the tab before the changes appear.
• Starting the timer before popping out: The timer continues running even when the tab is in the background, so it’s fine to start before or after popping out. But if you close the floating window, the timer resets because the tab is closed.

Tips

• Customize the appearance: Change the CSS in the <style> section to match your preference—font size, colors, background, etc.
• Add more features: You can extend the script to include lap times, countdown mode, or sound alerts when the timer reaches a certain value.
• Use keyboard shortcuts: In the floating window, you can still use keyboard shortcuts if you focus the window. For example, pressing the spacebar can trigger the Start/Pause button if it’s focused.
• Keep the file handy: Bookmark the file path in your browser or create a shortcut on your desktop for quick access.

Troubleshooting

• “Picture in Picture” option not appearing: Make sure you’re using Chrome or Edge version 116 or later. Also, right-click on a plain area of the page, not on a button or text. If it still doesn’t show, try refreshing the page and right-clicking again.
• Floating window closes immediately: This can happen if the tab is closed or the browser is restarted. Re-open the timer.html file and pop it out again.
• Timer doesn’t update in floating window: Check that the JavaScript has no errors. Open the browser’s developer console (F12) and look for red error messages. Common issues include typos in variable names or missing semicolons.
• Timer runs too fast or too slow: The setInterval is set to 100ms, which is smooth enough. If you notice drift, you can change the interval to 250ms or 1000ms, but the displayed time is based on the actual elapsed time, so it should stay accurate.

Frequently Asked Questions

Can I use this on Safari or Firefox?

No, the Document Picture-in-Picture API is currently only supported in Chromium-based browsers (Chrome, Edge, Opera, Brave). Safari and Firefox do not support it for arbitrary web pages.

Does the timer keep running when the floating window is minimized?

Yes, the timer runs in the background as long as the tab is open. Minimizing the floating window or covering it with other windows does not pause the timer.

Can I make the floating window smaller?

Yes, you can resize the floating window by dragging its edges or corners, just like a regular window. The minimum size is set by the browser.

Can I use this on a mobile phone?

No, Document Picture-in-Picture is not available on mobile browsers. It’s designed for desktop use.

How do I stop the floating window and return to the tab?

Click the “X” button on the floating window, or press the “Exit Picture-in-Picture” button that appears when you hover over the window. The tab will remain open.

Can I change the timer to count down instead of up?

Yes, you can modify the JavaScript to implement a countdown. You would need to set a target duration and decrement the elapsed time until zero.

Related

• Dim a 3-Way Switch From Both Locations?
• Star Wars Zero Company: Best Turn-Based Squad Tactics?
• Philadelphia Internet: Check Speeds & Total Cost