DEV Community

Introduction of Floating Window Library “JSFrame.js”

riversun on January 19, 2019

Hi there! Today I would like to introduce the library "JSFrame.js" I made. It is an independent and lightweight floating window library for JavaSc...

Read full post

Egogorka • Jul 23 '19

Hello, i've tried this and it sorta worked. Windows appeared as they should, but if there is an element on page with setted "z-index", then, after dragging any window to the position of this element the window would be covered by element.

I've tried adding a "z-index" to the parentDiv ("jsFrame_fixed_blabla") and voila, it worked, windows would be above any elements with smaller z-index than the parentDiv's one.

Rochie Yamit • Jun 11 '19

Hello ive tried it and it works. The thing is i initialize the dialog from your code snippet above. The thing is, when i tried pressing x, it closes but when I click my button again, it doesnt show up. I don't know what I did wrong. I put the frame.show in my onclick function. There is an error showing "cannot read property 'beanList' of null" in my js console when i tried pressing my button again when it doesnt show up. How can i show the dialog everytime i click the button and restricts it when the frame is still up.

riversun • Jun 13 '19

Which code did you try?
I will check it too.

Rochie Yamit • Jun 13 '19

The one that initializes and shows the frame. when you click the button it shows the frame, when you close, it closes. Again, when you click the button, js console pops some errors and the frame doesnt show up again.

glauco-proj • Jun 8 '20

Hi,

It's possible that the windows occupy only a certain area and not all body?

For example, I have an admin template with side menu and I want the windows to occupy only the right area of the system.

riversun • Jun 10 '20

Hi,

Is this what you want to do?

riversun.github.io/JSFrame.js/publ...

Specify the parent element in JSFrame's initialization parameter.
The next step is to specify the parent element's style as "overflow:hidden" to prevent the window from overflowing from that elements.

Then you might be able to do what you want to do.

glauco-proj • Jun 10 '20

Hi,

Great! I was already going through a parentElement but not the style overflow: hidden.

My parent element does not use the entire window area, there is a sidebar menu with 225px. When maximizing, the window gains all the available width (window.innerWidth), exceeding 225px of the screen (horizontal scroll), so i made a change to the function renderMaximizedMode in WindowEventHelper.js:

if (me.hideFrameBorder) {
    var parentElement = frame.jsFrame.windowManager.parentElement; //Not the best way!!
    if (parentElement ) {
        _toWidth = parentElement.offsetWidth;
        _toHeight = parentElement.offsetHeight + (me.hideTitleBar? from.titleBarHeight: 0);
    }
    else {
        _toWidth = window.innerWidth;
        _toHeight = window.innerHeight + (me.hideTitleBar? from.titleBarHeight: 0);
    }
} else {
    ...
}

fil2fip • May 6 '19

Hi,
It seems to be nice.

I copied/pasted the examples provided... It doesn't work ... Will try to fix it.

Other question, may I run a script (html+js) into a floating window (Thru the .html and/or .url property, I guess), whatever the main window is ?

Thank you from France !

riversun • May 7 '19

Hi,
thanks for your question.

Yes, you can write a script directly to the .html property,
or if there is a script in the page specified by the .url property, you can run it.
Additional questions are also welcome.

fil2fip • May 7 '19

Thanks a lot, Tom.
Will try a clock/weather project in a jsFrame !

tushar3499 • Aug 17 '20

Hi..great work.
I want to know how can I keep it active across all tabs ..The tab in which it loads is not the only place I want it to be displayed..I'd like it to be there across all tabs and if possible even after I minimise the browser

Jochem Stoel • Jan 20 '19

I like this. Pretty interesting. I want to suggest you make them draggable on phones as well.

riversun • Jun 9 '20

Yes,
Touch devices are now supported in V1.6.0.
Here's the latest code example.

riversun.github.io/JSFrame.js/public/

PDQM • Apr 28 '20

Hello,
I would like to try integration with a framework, that I build up, but it requires class migration. Is it possible to get the typescript sources?
Thanks.

Developp • May 28 '22

Hi,

When I call a window with the url, the window background opens transparently. What do I need to do to fix this.

Gauss • Dec 25 '23

Do You know how to Make it work with a touch screen device, it can't be dragged