jQWidgets Forums

Tagged: jqxwindow, window

This topic contains 3 replies, has 3 voices, and was last updated by Ivalde 9 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Positioning on a page longer than the screen height Posts
December 11, 2012 at 6:32 pm Positioning on a page longer than the screen height #12184

bmacadam
Participant

I’m displaying a window on a page that is longer than the height of the screen. My goal is to display the window in the center of the screen. I compute the correct offset relative to the top of the page and the window appears at that offset. Unfortunately the page scrolls back to the top so that the popup window is hidden. Here’s my code:

$("#editMileageWindow").jqxWindow({ width: 400, resizable: true, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#cancelMileage"), modalOpacity: 0.01}); $("#editMileageWindow").jqxWindow({ position: { x: offset.x, y: offset.y }, theme: theme }); $("#editMileageWindow").jqxWindow('show');

Is there a way to prevent the main window from scrolling back to the top?

December 12, 2012 at 7:57 am Positioning on a page longer than the screen height #12232
Dimitar
Participant
Hello bmacadam,

We tried to reproduce the reported behaviour but to no avail. Please try out the following example:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Window CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxwindow").jqxWindow({ height: 90, width: 150, isModal: true, autoOpen: false });
            $("#show").click(function () {
                var x = ($(window).width() - $("#jqxwindow").jqxWindow('width')) / 2 + $(window).scrollLeft();
                var y = ($(window).height() - $("#jqxwindow").jqxWindow('height')) / 2 + $(window).scrollTop();
                $("#jqxwindow").jqxWindow({ position: { x: x, y: y} });
                $("#jqxwindow").jqxWindow('open');
            });
        });
    </script>
</head>
<body>
    <div style="height: 1200px;">
    </div>
    <button id="show">
        Show window</button>
    <div id='content'>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                Content</div>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
December 12, 2012 at 10:19 pm Positioning on a page longer than the screen height #12255

bmacadam
Participant

After two hours of staring at the code and the html I realized that there was a subtle but important difference between the sample and my html. The click event to display the popup window was associated with the following element:

Update Mileage

When I changed the element to a div, it worked as expected. Thanks for checking it out.

Bill

July 16, 2015 at 7:33 pm Positioning on a page longer than the screen height #73831

Ivalde
Participant

For the window always to be positioned in screen center, when scrolled or not ecrolled, set the window div style to the following:

style=”position: fixed; left: 50%; top: 50%;”

Here is a complete example in which the winMsgTxt is set in runtime:

<div id=”winMsg” style=”position: fixed; left: 50%; top: 50%;”>
<div>
<div id=”winMsgTxt”></div>
<div>
<div style=”position: absolute; bottom: 10px; right: 10px; margin-top: 10px;”>
<input type=”button” id=”btnMsgOk” value=”OK” /><input type=”button” id=”btnMsgCancel” value=”Cancel” />
</div>
</div>
</div>
</div>
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.