Window it starts rendering in a default position, creating a flash effect when I set the position

[DiegoUnanueParticipant]

I’m getting the position of a window when it’s opened like this:

$('#windowAdConsole').on('open', function(event) {

    $('#windowAdConsole').jqxWindow('bringToFront');

    xPosPrev = xPosNew;
    yPosPrev = yPosNew;

//Here I get the position

        $('#windowAdConsole').jqxWindow({ position: { x: xPosPrev + 20, y: yPosPrev + 20} });
    position = $('#windowAdConsole').jqxWindow('position');
    xPosNew = position.x;
    yPosNew = position.y;

});

But when I moved and release the position, I don’t get the position moved but the inicial position when it’s opened. For example the inicial position of the window is x: 200 y:200, then I moved it and I get again the same values. The code used to moved it is:

    $('#windowAdConsole').on('moved', function (event) {
    position = $('#windowAdConsole').jqxWindow('position');
    xPosNew = position.x;
    yPosNew = position.y;
});

Before the final window position, it starts rendering the window in a default position I think, creating a flash effect, the window appear in one position and then moved to the final position, why it do that, if im setting the position when its opened, how can I modify this issue, or it’s a jqwidgets issue?

[Peter StoevKeymaster]

Hi DiegoUnanue,

The “position” property is used for initialization of the window. For getting its location, use the jQuery’s offset method – it returns the coordinates of an HTML Element.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DiegoUnanueParticipant]

I’m getting the position like this,

$(‘#windowAdConsole’).on(‘moved’, function (event) {
var positionCss = $(‘#windowAdConsole’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;

});

and it works but when I assign onOpen event the new position I get the flash effect:

when the window its opened I set the position
$(‘#windowAdConsole’).jqxWindow({ position: { x: xPosPrev + 20, y: yPosPrev + 20} });

when I close it and open again in other position setting
$(‘#windowAdConsole’).jqxWindow({ position: { x: xPosPrev + 20, y: yPosPrev + 20} });

I get the flash effect.

I need to solve this to make a solid application.

Thanks
Diego Unanue

[Peter StoevKeymaster]

Hi Diego Unanue,

If you change the Position after the “open” event is raised, then you will have such effect which is normal and happens because the window is displayed on its original position and after it is displayed you change the position so it will be moved to a new position. The solution is to change the window’s position outside the “open” event handler.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DiegoUnanueParticipant]

I change my code like you said:

$(‘#windowAdConsole’).on(‘open’, function (event) {

$(‘#jqxAddConsoleTabs’).jqxTabs({
width: ‘100%’,
height: 468,
position: ‘top’,
theme: ‘custom’,
selectedItem: 0
});

xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

}

Code is outside open event
//$(‘#windowAdConsole’).position().left = xPosNew;
//$(‘#windowAdConsole’).position().top = yPosNew;

$(‘#windowAdConsole’).jqxWindow(‘bringToFront’);

And Im still getting the flash between the previous and new position. Where should I locate this code, should I change it?
Best Regards,
Diego Unanue

[Peter StoevKeymaster]

Hi Diego Unanue,

Where do you change the position? There is code which is commented. Why do you use “bringToFront? It should be used only when you have multiple windows on the web page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[DiegoUnanueParticipant]

Hi Peter thanks for your answer, yes I have many windows, the idea it’s to set a cascade style between the windows, when they are opened, getting the moved position to cascade them when they are moved and other it’s opened. At the very first time I put the code inside the open event, but then I put it outside it, in the main function of the model. I try many posibilities but none of them worked, I still getting the flash effects from the previous position.

function initialize()
{
//WINDOW 1 ADCONSOLE
$(‘#windowAdConsole’).on(‘open’, function (event) {
$(‘#jqxAddConsoleTabs’).jqxTabs({
width: ‘100%’,
height: 468,
position: ‘top’,
theme: ‘custom’,
selectedItem: 0
});

$(‘#windowAdConsole’).jqxWindow(‘bringToFront’);

});

//Gets the position and stored it in a variable
xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

//Sets the new position to the window
$(‘#windowAdConsole’).position().left = xPosPrev;
$(‘#windowAdConsole’).position().top = yPosPrev;

//Gets the new position
position = $(‘#windowAdConsole’).jqxWindow(‘position’);
xPosNew = position.x;
yPosNew = position.y;

$(‘#windowAdConsole’).on(‘moved’, function (event) {
//Gets the position when moved
var positionCss = $(‘#windowAdConsole’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;
});

//WINDOW 2 VOLAXE
$(‘#windowVolaxe’).jqxWindow({
showCollapseButton: true, height: 518, width: 832, maxWidth: 832, theme: ‘custom’, autoOpen: false, resizable: false, closeAnimationDuration: 200,
initContent: function () {
$(‘#jqxTabs’).jqxTabs({
width: ‘100%’, height: 468, position: ‘top’, theme: ‘custom’, selectedItem: 0
});
}
});

$(‘#windowVolaxe’).on(‘open’, function (event) {

$(‘#jqxTabs’).jqxTabs({
width: ‘100%’, height: 468, position: ‘top’, theme: ‘custom’, selectedItem: 0
});

$(‘#windowVolaxe’).jqxWindow(‘bringToFront’);

});

//Gets the position and stored it in a variable
xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

//Sets the new position to the window
$(‘#windowVolaxe’).position().left = xPosPrev;
$(‘#windowVolaxe’).position().top = yPosPrev;

//Gets the new position
position = $(‘#windowVolaxe’).jqxWindow(‘position’);
xPosNew = position.x;
yPosNew = position.y;

$(‘#windowVolaxe’).on(‘moved’, function (event) {
var positionCss = $(‘#windowVolaxe’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;

});

};

Best Regards,
Diego Unanue

[DiegoUnanueParticipant]

Where should I locate the following code:
/Sets the new position to the window
$(‘#windowVolaxe’).position().left = xPosPrev;
$(‘#windowVolaxe’).position().top = yPosPrev;

Best Regards,
Diego Unanue

[Peter StoevKeymaster]

Hi Diego Unanue,

I suggest you to look at the difference between: http://api.jquery.com/position/ and http://api.jquery.com/offset/. In addition, to set the jqxWindow’s location, according to me, you should use the jQuery’s offset function and also set the location with 1 function call. The jqxWindow’s coordinates are Absolute and relative to the document body’s top-left edge.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts