[SOLVED] how do i make a floating window that stays above programs, moveable and will accept input from another script

how do i make a floating window that stays above programs, moveable and will accept input from another script

I am trying to build an indesign script that will produce a floating window that can display report results. I need to use this as a check-off "sheet" that will stay visible and moveable. it needs to stay active while I fix the errors that to window is displaying. Confusing, I know.

I have alert windows that will pop up and show report results successfully but I have to close the window (with all of my new info) in order to make the changes in my inDesign document. I just don't know what key words im not saying in order to make this work. I'm new to coding.

Solution

You can create a floating window with the help of javscript and css.

Here is a sample floating window created with basic javascript and css. You can add minimize functionality also to keep the window minimized

 const windowElement = document.getElementById('window');
    let isDragging = false;
    let initialX;
    let initialY;

    windowElement.addEventListener('mousedown', startDragging);
    windowElement.addEventListener('mouseup', stopDragging);
    windowElement.addEventListener('mousemove', drag);

    function startDragging(e) {
        isDragging = true;
        initialX = e.clientX - windowElement.getBoundingClientRect().left;
        initialY = e.clientY - windowElement.getBoundingClientRect().top;
    }

    function stopDragging() {
        isDragging = false;
    }

    function drag(e) {
        if (isDragging) {
            const newX = e.clientX - initialX;
            const newY = e.clientY - initialY;
            windowElement.style.left = `${newX}px`;
            windowElement.style.top = `${newY}px`;
        }
    }

    
     body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .window {
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        cursor: move;
    }

<div class="window" id="window">
    <div class="window-header" style="background-color: #ccc; padding: 5px;">
        <span>Drag me!</span>
    </div>
    <div class="window-content" style="padding: 10px;">
        <!-- Your content goes here -->
        This is a movable floating window.
    </div>
</div>