Resizing jQuery UI Dialog on Top of WebGL/X3DOM

Question

I am developing a web application:

http://filebox.vt.edu/users/sharni/Radio/spectrum.html

Clicking on the help button pops up a resizeable help window. However, if the cursor moves outside of the dialog when resizing, the dialog stops resizing! Does anyone know how to prevent this from happening? Still, it is possible to resize the window by moving the cursor very slowly.

Thanks in advance!

Answer 1

Hey i got short solution for you:

Step 1: Create layer that will appears when user works with UI. That layer will cover canvas.

var coverLayer = $('<div>').appendTo("body").css({ "width" : "100%", "height" : "100%", "z-index" : "2", "background-color" : "rgba(124, 124, 124, 0.5)", "position" : "absolute" }).hide();

Step 2: Make layer visible only when user works with UI.

$(".ui-dialog").on( "resizestart dragstart" , function( event, ui ) { 
    coverLayer.show();
    // here you can add some code that will pause webgl while user works with ui, so resizing and moving will be faster and smoother
});

$(".ui-dialog").on( "resizestop dragstop" , function( event, ui ) { 
    coverLayer.hide();
    // here you unpause webgl
});

Step 3 (optional): Pause webgl while user works with UI. Couse if he does, he isn't probably interested in canvas, so you can make other stuff happening faster and smoother...

PS: You had same problem with dragging dialog, so I fixed this too simply with adding dragstart/dragstop. You can also add more events there.

EDIT:

Why that problem happen?

I guess its because of resize event. It is happening in some short periods and is responsible for element redraw (setting new width and height). I also think that it can detect if another event is triggered, then resize is not triggered anymore.

Now, because you are using webgl that eats a lot of javascript calculation power, then short periods for resize event are not short anymore. Since then, element is not redrawed that often as you want and mouse will appear futher from element which probably trigger some event that cause stop calling resize.

If you stop webgl, calling period will be short again, so it could prevent that problem, but I'm not very sure about that...