Positioning a window - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bottom, center, jqxwindow, left, open, position, right, top, window

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

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

Author

Positioning a window Posts

May 13, 2014 at 3:56 pm Positioning a window #54405

Participant

Hi, I’m trying to create a window at the center of my body, but when I define the attribute position to “center” (that is the default value), it’s not positioning it vertically at the middle (Y axis).

Another question is that I’m able to position a window at the bottom, I can position it at the right, but I just don’t know how to positioning it at the bottom-right.

Is that a way to do these things?

<html>
  <head>
    <title>Test</title>
    
    <link rel="stylesheet" href="lib/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="lib/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxgrid.grouping.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxwindow.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxradiobutton.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxmaskedinput.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxcombobox.js"></script>
    
    <script type="text/javascript" src="lib/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/globalization/globalize.js"></script>
    
    <script type="text/javascript">
      function createCenterPosWindow(){
        var html = '<div id="myCenterPosWindow">' +
                   '<div id="title">@Center</div>' +
                   '<div id="content"></div>' +
                   '</div>';
        $(document.body).append(html);

        //Works only on horizontal position
        $('#myCenterPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'center'});
        $('#myCenterPosWindow').jqxWindow('open');
      };
      
      function createRightPosWindow(){
        var html = '<div id="myRightPosWindow">' +
                   '<div id="title">@Right</div>' +
                   '<div id="content"></div>' +
                   '</div>';
        $(document.body).append(html);

        //Works
        $('#myRightPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'right'});
        $('#myRightPosWindow').jqxWindow('open');
      };
      
      function createBottomPosWindow(){
        var html = '<div id="myBottomPosWindow">' +
                   '<div id="title">@Bottom</div>' +
                   '<div id="content"></div>' +
                   '</div>';
        $(document.body).append(html);
        
        //Works
        $('#myBottomPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'bottom'});
        $('#myBottomPosWindow').jqxWindow('open');
      };
      
      function createRightBottomPosWindow(){
        var html = '<div id="myRightBottomPosWindow">' +
                   '<div id="title">@RightBottom</div>' +
                   '<div id="content"></div>' +
                   '</div>';
        $(document.body).append(html);
        /*
         * This position just doesn't work
         * I tried:
         *   position: 'right-bottom'
         *   position: 'right bottom'
         *   position: 'right/bottom'
         *   position: 'right_bottom'
         *   position: 'bottom-right'
         *   position: 'bottom right'
         *   position: 'bottom/right'
         *   position: 'bottom_right'
         *   position: ['bottom', 'right']
         *   position: ['right', 'bottom']
         *   position: {x: 'right', y: 'bottom'}
         */
        $('#myRightBottomPosWindow').jqxWindow({width: '200px', height: '100px', autoOpen: false, resizable: false, position: 'right-bottom'});
        $('#myRightBottomPosWindow').jqxWindow('open');
      };
      
      $(document).ready(function (){
	      createCenterPosWindow();
	      createRightPosWindow();
	      createBottomPosWindow();
	      createRightBottomPosWindow();
      });
    </script>
  </head>
</html>

May 14, 2014 at 7:27 am Positioning a window #54425

Dimitar

Participant

Hello Carlos Carbonari,

Please check out the following fiddles:

http://jsfiddle.net/jqwidgets/Rns4L/ – a window is opened by the click of a button in the center of the screen (the default value of position is “center”);
http://jsfiddle.net/jqwidgets/5LLay/ – the window is positioned in the top-left of the screen (position: 'top, left'). For bottom-right, position has to be set to “bottom, right”.

Best Regards,
Dimitar

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

July 16, 2015 at 7:31 pm Positioning a window #73829

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:

Author

Posts

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

You must be logged in to reply to this topic.