Floating window

Await documentPictureInPicture.requestWindow({ width: 350, height: 500, }); // Grab the textarea container by ID. const appTextarea = document.getElementById("textareaContainer"); // Move the textarea to the Picture-in-Picture window. pipWindow.document.body.append(appTextarea);});And that’s all I needed to do to put the textarea “magically” in a floating window and call it a day! But I would be lying if I said that I was all but done since that was only like 50% of the work.The blank screen of PiPSince we are appending the textarea container to the floating window, the browser will take out that part of the page and port it over to the floating window and the parent window will left with the space without any content—making it pretty bland.Here’s what it looks like. To combat this issue, we can use the enter event of documentPictureInPicture object to detect when the floating window is triggered and apply some classes to the wrapping container of the textarea which is still there in the parent window.documentPictureInPicture.addEventListener("enter", (event) => { const mainContainer = document.querySelector("#mainContainer"); mainContainer.classList.add("pip");});As you can tell, I’m adding a class called pip to the main container of the page when the floating window is activated. Now, we can use this class to style the empty area of the floating window..pip { display: flex; align-items: center; justify-content: center; height: 100%; color: #7e7d7d; font-weight: bold; &::after { content: "Floating Window is Activated"; }}So, once the pip class is applied to the wrapper container, we can show a message that says “Floating Window is Activated” in the center of the parent window. This can effectively convey to the user that the floating window is activated and they can interact with it and as an added bonus, the blank area is not blank anymore. Putting back the content in the parent windowThe last thing I needed to do was to put the textarea container back when the floating window was closed.For this, we can use the pagehide event on the acquired floating window object. We can then grab the textarea container from the floating window and append it back to the parent window in the same click event handler like so.pipButton.addEventListener('click', async() => { // Open a Picture-in-Picture window. const pipWindow = await documentPictureInPicture.requestWindow({ width: 350, height: 500, }); // code commented out for brevity // Move the textarea back when the Picture-in-Picture window closes. pipWindow.addEventListener("pagehide", (event) => { const mainContainer = document.querySelector("#mainContainer"); const textareaContainer = event.target.querySelector("#textareaContainer"); mainContainer.append(textareaContainer); mainContainer.classList.remove("pip"); });});You may have also noticed that I’m removing the pip class from the main container since we don’t need the “Floating Window is Activated” message shown anymore.In closingAnd that’s pretty much it. I did a few extra things like adding an overlay to the parent window and disabling all the pointer events so that the user can’t interact with the parent window until the floating window is closed.If you’re interested, you can refer to this commit on Notepad’s GitHub repository to know more about it.

The new Realme skin based on Android 12 is now available. The skin, dubbed Realme UI 3.0 brings redesigned icons, a feature-rich AOD (Always on Display), interface-level modifications, an upgraded AI Animation engine, and better fluidity among other features. It also includes the most recent Android 12 OS features, such as a new aesthetic design, improved fast settings, a privacy dashboard, increased location tracking control, and floating windows 2.0. This post will guide you on how you can set up and enable floating window 2.0 on realme smartphones. Check out our other realme UI content.Download Realme UI 3.0 Stock Wallpapers [4K/FHD+]Omoji Avatar in Realme UI 3.0: Everything You Need To KnowHow to Customize and Use the Do Not Disturb (DND) Mode in Realme UINote that realme UI 3.0 is not being rolled out to all the realme devices, and there’s only a particular set of devices that will be receiving the update. Here’s a list of all the realme UI 3.0 compatible smartphones.Realme UI 2.0 introduced a system-wide picture-in-picture mode, named the floating window capability. While using other programs, you may now view videos in a tiny floating window. As a result, you may view a YouTube video while simultaneously chatting on WhatsApp. The Floating Window was one of realme UI 2.0’s most popular elements, and its second interaction is even better in realme UI 3.0. Floating Window 2.0 restores all of the multitasking deliciousness and versatility while also incorporating several user-requested enhancements.If you’re looking to multitask, have a ton of programs open and running in the forefront at the same time, or simply watch your favorite TV show while browsing the web, a floating window is a perfect solution.Realme UI 3.0 Tip: Here’s How You Can Enable Floating Windows 2.0Here’s how you can use floating windows in realme UI to multi-task like a pro.Enable Floating Windows in Realme UIHow to Open Floating WindowsHow to Resize Floating WindowsHow to Hide and Share Floating Windows in realme UI1] Enable Floating Windows in Realme UITo configure and enable PIP mode or floating windows, follow these simple steps.How to Enable Floating Windows realme UI 3.0Open the Settings application.Navigate to Settings > Special Features and choose Flexible windows.Here, you can find all the customization options for the same.2] How to Open Floating WindowsNow that you’ve got an idea of how you can enable one among realme UI’s much-awaited features, here’s how you can access it.Open Floating Windows realme UI 3.0You’ve got two methods to enable realme UI’s floating window feature – either via the smart sidebar or a swipe. To launch an app in a floating window, either bring up the smart sidebar and tap on the application or swipe up on your screen with the application launched. You can check out the representations for reference.3] How to Resize Floating WindowsHow to Resize Floating Windows realme UI 3.0Did you know that, not only you can enable, but also resize windows with realme UI 3.0? Here’s how to do so. With a floating window open

Imagine watching a tutorial on a streaming platform or a video on YouTube and needing to navigate other sections of the page without losing track of what you are watching. Among all the many ways to accomplish this, putting the video in a floating window is one of the most convenient ones. What is Picture-in-Picture API? Floating windows beyond videos Implementing the thing The blank screen of PiP Putting back the content in the parent window In closingWhat is Picture-in-Picture API?Floating windows are essentially a way to display a window on top of other windows persistently. These windows are usually small and stuck in one of the corners of the screen. Of course, you can drag the window wherever you want. You might already know that this sort of floating, always-on-top video windows can be implemented using the Picture-in-Picture API.This is pretty common these days but I recently discovered a part of this API—Document Picture-in-Picture API—can be extended to put any part of an HTML page in a floating window and I instantly had an idea to implement this in one of my projects.Floating windows beyond videosAs I said previously, using the Document Picture-in-Picture API, you can put any part of an HTML page in a floating window. Now, I have a Notepad app which is essentially a progressive web app and I wanted to do something with it using the PiP API.I thought why not put the text area in a floating window and let the user interact with it on top of all the other windows? In my opinion, it can prove to be pretty useful to put down notes conveniently across other apps. So, I embarked on a journey to make this a reality!Implementing the thingFirst things first, I needed to put an icon on the UI somewhere that can be used to trigger the floating window. Here’s what that looks like.The one thing I needed to take care of was to make sure this icon only appears when the Picture-in-Picture API is supported in the browser.So, I made the icon hidden by default, and using the following piece of code, I made it visible only when the API is supported.if ('documentPictureInPicture' in window) { $('#pipButtonContainer').show();}Next, I added a click event listener to the icon and used the documentPictureInPicture.requestWindow() method to create a floating window like so.const pipButton = document.getElementById('pip');pipButton.addEventListener('click', async() => { // Open a Picture-in-Picture window. const pipWindow = await documentPictureInPicture.requestWindow({ width: 350, height: 500, });});As you can tell, we can pass a width and height to the requestWindow() method to specify the size of the floating window when it is created.Once we acquire the floating window, it’s time to put the content inside it. In my case, I just need to put the textarea of my Notepad app inside the floating window. So, I grabbed the textarea container by its ID and appended it in the body of the floating window like so.pipButton.addEventListener('click', async() => { // Open a Picture-in-Picture window. const pipWindow =