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.
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>