A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.

When you drag/resize a jsPanel over an <iframe> within the same document you might have an issue because the handler dragging/resizing the panel is not unbound upon a mouseup. This happens when you drag/resize with a fast mouse movement resulting in a mouseup that occurs over the <iframe> (which is a different document) and not over the drag/resize handle.

To solve this add start and stop callbacks to options dragit and resizeit that set the iframe's css property pointer-events to 'none' while dragging/resizing the panel.

let frame = document.getElementById('frame-1');

jsPanel.create({
    dragit: {
        start: () => {frame.style.pointerEvents = 'none';},
        stop: () => {frame.style.pointerEvents = 'auto';}
    },
    resizeit: {
        start: () => {frame.style.pointerEvents = 'none';},
        stop: () => {frame.style.pointerEvents = 'auto';}
    }
});

Basic demo pages are available for the following editors:

If a jsPanel seems to disappear (most probably it's moved offscreen) on dragstart check CSS height values for the <html> and <body> elements. The <body> element height might be less than window height or even less than content height.

Make sure that <body> height takes up the whole window height and dragging should work as expected.

jsPanel is written in plain javascript without any dependencies. Therefore it should work with all those libraries/frameworks.

But there are no library/framework specific versions of jsPanel. Please consider that jsPanel is a one man show and that I'm not a professional programmer. Neither do I have the time nor the knowledge to deal with all those libraries.

So if you happen to need a jsPanel version adapted to a certain library/framework I fear you have to help yourself. Of course I'm willing to help as good as I can ... but since I personally never worked with Angular, React, Vue and the like you probably know a lot more than I do about those libraries/frameworks.

jsPanel is Open Source and free. And that's what it will remain. However, if you like my work and want to support it I'd be very grateful for a small donation.

Donate

Buy me a coffee Buy me a coffee

Thanks a lot to JetBrains for granting an All Products Pack Open Source License to jsPanel.