jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by BrentH 10 years, 8 months ago.

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

Author

Moving a Window Posts

September 30, 2014 at 6:45 pm Moving a Window #60387

BrentH

Participant

I need to move a jqxwindow so that the upper right corner of the window is 40 (pixels) from the right side of the browser window. How can I do that? Also, if I need to set it relative to the bottom of the browser window – same question.

If the user resizes the browser how do I keep it in sync?

Thanks
Brent

October 1, 2014 at 10:44 am Moving a Window #60450

Nadezhda

Participant

Hello Brent,

Please, find below an example which shows how to move window in browser window:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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 () {
            $("#jqxwindowTop").jqxWindow({ height: 90, width: 150, theme: 'summer' });
            $(".windowTop").css("left", "");
            $("#jqxwindowBottom").jqxWindow({ height: 90, width: 150, theme: 'summer' });
            $(".windowBottom").css({
                "top": "",
                "left": ""
            });
        });
    </script>
    <style>
        .windowTop {
            top: 0px !important;
            right: 40px !important;
        }

        .windowBottom {
            bottom: 0px !important;
            right: 40px !important;
        }
    </style>
</head>
<body>
    <div id='content'>
        <div id='jqxwindowTop' class="windowTop">
            <div>Header</div>
            <div>Content</div>
        </div>
        <div id='jqxwindowBottom' class="windowBottom">
            <div>Header</div>
            <div>Content</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

October 1, 2014 at 3:48 pm Moving a Window #60480

BrentH

Participant

Thanks, this helps a lot.

Author

Posts

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

You must be logged in to reply to this topic.